SOURCE CODE
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MAISON NOIR — Luxury Fashion House</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@200;300;400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- LOADING SCREEN -->
<div id="loader">
<div class="loader-inner">
<div class="loader-logo">MAISON NOIR</div>
<div class="loader-bar"><div class="loader-fill"></div></div>
<div class="loader-tagline">Since 1987</div>
</div>
</div>
<!-- CUSTOM CURSOR -->
<div id="cursor"></div>
<div id="cursor-follower"></div>
<!-- NAVIGATION -->
<nav id="navbar">
<div class="nav-left">
<a href="#" class="nav-link">Collections</a>
<a href="#" class="nav-link">Lookbook</a>
<a href="#" class="nav-link">Designers</a>
</div>
<div class="nav-logo">MAISON NOIR</div>
<div class="nav-right">
<a href="#" class="nav-link">Editorial</a>
<a href="#" class="nav-link">World</a>
<button class="nav-icon" aria-label="Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
</button>
<button class="nav-icon" aria-label="Bag">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
</button>
<button class="nav-hamburger" id="navHamburger" aria-label="Menu">
<span></span><span></span>
</button>
</div>
</nav>
<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-inner">
<nav class="mobile-nav">
<a href="#">Collections</a>
<a href="#">Lookbook</a>
<a href="#">Designers</a>
<a href="#">Editorial</a>
<a href="#">World</a>
</nav>
<div class="mobile-footer-links">
<span>Client Services</span>
<span>Store Locator</span>
</div>
</div>
</div>
<!-- ============================
HERO
============================= -->
<section id="hero">
<div class="hero-slides">
<div class="hero-slide active" style="background-image:url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=1920&auto=format&fit=crop')">
<div class="hero-overlay"></div>
</div>
<div class="hero-slide" style="background-image:url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=1920&auto=format&fit=crop')">
<div class="hero-overlay"></div>
</div>
<div class="hero-slide" style="background-image:url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1920&auto=format&fit=crop')">
<div class="hero-overlay"></div>
</div>
</div>
<div class="hero-content">
<div class="hero-eyebrow reveal-text">Autumn — Winter 2025</div>
<h1 class="hero-title">
<span class="line" data-line="1">The Art of</span>
<span class="line italic" data-line="2">Becoming</span>
</h1>
<p class="hero-sub reveal-text">A new season. A new chapter in luxury.</p>
<div class="hero-actions reveal-text">
<a href="#collections" class="btn-primary">Explore Collection</a>
<a href="#lookbook" class="btn-ghost">View Lookbook</a>
</div>
</div>
<div class="hero-scroll-hint">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
<div class="hero-slide-controls">
<button class="slide-dot active" data-slide="0"></button>
<button class="slide-dot" data-slide="1"></button>
<button class="slide-dot" data-slide="2"></button>
</div>
<div class="hero-counter">
<span id="currentSlide">01</span>
<span class="divider">/</span>
<span>03</span>
</div>
</section>
<!-- ============================
MARQUEE
============================= -->
<div class="marquee-strip">
<div class="marquee-track">
<span>Autumn Winter 2025</span>
<span class="dot">◆</span>
<span>New Collection</span>
<span class="dot">◆</span>
<span>Paris Fashion Week</span>
<span class="dot">◆</span>
<span>Maison Noir</span>
<span class="dot">◆</span>
<span>Autumn Winter 2025</span>
<span class="dot">◆</span>
<span>New Collection</span>
<span class="dot">◆</span>
<span>Paris Fashion Week</span>
<span class="dot">◆</span>
<span>Maison Noir</span>
<span class="dot">◆</span>
<span>Autumn Winter 2025</span>
<span class="dot">◆</span>
<span>New Collection</span>
<span class="dot">◆</span>
</div>
</div>
<!-- ============================
COLLECTIONS
============================= -->
<section id="collections" class="section-collections">
<div class="container">
<div class="section-header reveal">
<div class="section-eyebrow">The Collection</div>
<h2 class="section-title">Autumn / Winter<br><em>2025</em></h2>
</div>
<div class="collection-filters reveal">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="womenswear">Womenswear</button>
<button class="filter-btn" data-filter="menswear">Menswear</button>
<button class="filter-btn" data-filter="accessories">Accessories</button>
<button class="filter-btn" data-filter="couture">Couture</button>
</div>
<div class="collection-grid" id="collectionGrid">
<div class="collection-item large reveal" data-category="womenswear">
<div class="item-image">
<img src="https://images.unsplash.com/photo-1594938298603-c8148c4b4571?w=800&auto=format&fit=crop" alt="Womenswear collection" loading="lazy" />
<div class="item-overlay">
<span class="item-category">Womenswear</span>
<h3 class="item-name">Obsidian Coat</h3>
<span class="item-price">€4,200</span>
<button class="item-cta">Add to Selection</button>
</div>
</div>
<div class="item-info">
<span>01</span>
<h3>Obsidian Coat</h3>
<span>Womenswear</span>
</div>
</div>
<div class="collection-item reveal" data-category="menswear">
<div class="item-image">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&auto=format&fit=crop" alt="Menswear collection" loading="lazy" />
<div class="item-overlay">
<span class="item-category">Menswear</span>
<h3 class="item-name">Structured Blazer</h3>
<span class="item-price">€2,800</span>
<button class="item-cta">Add to Selection</button>
</div>
</div>
<div class="item-info">
<span>02</span>
<h3>Structured Blazer</h3>
<span>Menswear</span>
</div>
</div>
<div class="collection-item reveal" data-category="accessories">
<div class="item-image">
<img src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&auto=format&fit=crop" alt="Accessories collection" loading="lazy" />
<div class="item-overlay">
<span class="item-category">Accessories</span>
<h3 class="item-name">Noir Satchel</h3>
<span class="item-price">€1,650</span>
<button class="item-cta">Add to Selection</button>
</div>
</div>
<div class="item-info">
<span>03</span>
<h3>Noir Satchel</h3>
<span>Accessories</span>
</div>
</div>
<div class="collection-item reveal" data-category="womenswear">
<div class="item-image">
<img src="https://images.unsplash.com/photo-1566174053879-31528523f8ae?w=600&auto=format&fit=crop" alt="Womenswear evening" loading="lazy" />
<div class="item-overlay">
<span class="item-category">Womenswear</span>
<h3 class="item-name">Evening Silhouette</h3>
<span class="item-price">€6,400</span>
<button class="item-cta">Add to Selection</button>
</div>
</div>
<div class="item-info">
<span>04</span>
<h3>Evening Silhouette</h3>
<span>Womenswear</span>
</div>
</div>
<div class="collection-item reveal" data-category="couture">
<div class="item-image">
<img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=600&auto=format&fit=crop" alt="Couture" loading="lazy" />
<div class="item-overlay">
<span class="item-category">Couture</span>
<h3 class="item-name">Phantom Gown</h3>
<span class="item-price">€18,500</span>
<button class="item-cta">By Appointment</button>
</div>
</div>
<div class="item-info">
<span>05</span>
<h3>Phantom Gown</h3>
<span>Couture</span>
</div>
</div>
<div class="collection-item reveal" data-category="menswear">
<div class="item-image">
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=600&auto=format&fit=crop" alt="Menswear suit" loading="lazy" />
<div class="item-overlay">
<span class="item-category">Menswear</span>
<h3 class="item-name">The Noir Suit</h3>
<span class="item-price">€5,200</span>
<button class="item-cta">Add to Selection</button>
</div>
</div>
<div class="item-info">
<span>06</span>
<h3>The Noir Suit</h3>
<span>Menswear</span>
</div>
</div>
</div>
</div>
</section>
<!-- ============================
STATS COUNTER
============================= -->
<section class="section-stats">
<div class="stats-grid">
<div class="stat-item reveal">
<div class="stat-number" data-target="38">0</div>
<div class="stat-label">Years of Heritage</div>
</div>
<div class="stat-item reveal">
<div class="stat-number" data-target="124">0</div>
<div class="stat-label">Boutiques Worldwide</div>
</div>
<div class="stat-item reveal">
<div class="stat-number" data-target="47">0</div>
<div class="stat-label">Fashion Week Shows</div>
</div>
<div class="stat-item reveal">
<div class="stat-number" data-target="2400">0</div>
<div class="stat-label">Artisans Employed</div>
</div>
</div>
</section>
<!-- ============================
LOOKBOOK
============================= -->
<section id="lookbook" class="section-lookbook">
<div class="lookbook-header reveal">
<div class="section-eyebrow">Autumn Winter 2025</div>
<h2 class="section-title">The Lookbook</h2>
<p class="section-desc">A study in shadow and silhouette. This season's story is told through contrast, architecture, and the quiet power of restraint.</p>
</div>
<div class="lookbook-editorial">
<div class="lookbook-left reveal">
<div class="lookbook-big-img">
<img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&auto=format&fit=crop" alt="Editorial fashion shoot" loading="lazy" />
<div class="lookbook-caption">
<span class="caption-num">01</span>
<div>
<p class="caption-title">Shadow & Form</p>
<p class="caption-sub">Womenswear — AW25</p>
</div>
</div>
</div>
</div>
<div class="lookbook-right">
<div class="lookbook-text reveal">
<blockquote>"Fashion is the armor to survive the reality of everyday life."</blockquote>
<p>The AW25 collection draws from architecture and absence — the spaces between forms, the weight of fabric against skin, the discipline of cut. Each piece is a meditation on power dressed as elegance.</p>
<a href="#" class="btn-text-arrow">Explore All Looks <span>→</span></a>
</div>
<div class="lookbook-small-grid">
<div class="lookbook-small reveal">
<img src="https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=400&auto=format&fit=crop" alt="Look detail" loading="lazy" />
<div class="lookbook-caption small">
<span class="caption-num">02</span>
<p class="caption-title">Architectural Black</p>
</div>
</div>
<div class="lookbook-small reveal">
<img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&auto=format&fit=crop" alt="Look detail" loading="lazy" />
<div class="lookbook-caption small">
<span class="caption-num">03</span>
<p class="caption-title">Midnight Ivory</p>
</div>
</div>
</div>
</div>
</div>
<div class="lookbook-gallery reveal">
<div class="gallery-item" data-index="0">
<img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=600&auto=format&fit=crop" alt="Gallery look 1" loading="lazy" />
<div class="gallery-hover">View Look 04</div>
</div>
<div class="gallery-item" data-index="1">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&auto=format&fit=crop" alt="Gallery look 2" loading="lazy" />
<div class="gallery-hover">View Look 05</div>
</div>
<div class="gallery-item" data-index="2">
<img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=600&auto=format&fit=crop" alt="Gallery look 3" loading="lazy" />
<div class="gallery-hover">View Look 06</div>
</div>
<div class="gallery-item" data-index="3">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&auto=format&fit=crop" alt="Gallery look 4" loading="lazy" />
<div class="gallery-hover">View Look 07</div>
</div>
</div>
</section>
<!-- LIGHTBOX -->
<div id="lightbox" class="lightbox">
<button class="lightbox-close" id="lightboxClose">✕</button>
<button class="lightbox-prev" id="lightboxPrev">‹</button>
<button class="lightbox-next" id="lightboxNext">›</button>
<div class="lightbox-content">
<img id="lightboxImg" src="" alt="Full look" />
</div>
</div>
<!-- ============================
VIDEO CAMPAIGN
============================= -->
<section class="section-video">
<div class="video-bg" style="background-image:url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=1920&auto=format&fit=crop')"></div>
<div class="video-overlay"></div>
<div class="video-content reveal">
<div class="section-eyebrow light">Campaign Film</div>
<h2 class="video-title">The Becoming<br><em>Campaign</em></h2>
<p class="video-desc">Directed by Sofia Lenz. Shot in the Saharan dunes and the streets of Paris.</p>
<button class="play-btn" id="playBtn" aria-label="Play campaign film">
<div class="play-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</div>
<div class="play-ripple"></div>
</button>
<span class="video-duration">4 min 32 sec</span>
</div>
</section>
<!-- VIDEO MODAL -->
<div id="videoModal" class="video-modal">
<div class="video-modal-inner">
<button class="video-modal-close" id="videoModalClose">✕</button>
<div class="video-placeholder">
<div class="video-play-center">▶</div>
<p>Campaign Film — The Becoming</p>
</div>
</div>
</div>
<!-- ============================
DESIGNERS
============================= -->
<section id="designers" class="section-designers">
<div class="container">
<div class="section-header reveal">
<div class="section-eyebrow">The Creative Force</div>
<h2 class="section-title">Our <em>Designers</em></h2>
</div>
<div class="designers-grid">
<div class="designer-card reveal" data-designer="0">
<div class="designer-img">
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=500&auto=format&fit=crop" alt="Isabelle Noir" loading="lazy" />
<div class="designer-overlay">
<button class="designer-cta">View Profile</button>
</div>
</div>
<div class="designer-info">
<h3>Isabelle Noir</h3>
<span>Creative Director</span>
<p>Visionary architect of the Maison's singular aesthetic since 2014. Trained at Central Saint Martins, her work synthesises Parisian couture with Tokyo minimalism.</p>
</div>
</div>
<div class="designer-card reveal" data-designer="1">
<div class="designer-img">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&auto=format&fit=crop" alt="Marcus Delacroix" loading="lazy" />
<div class="designer-overlay">
<button class="designer-cta">View Profile</button>
</div>
</div>
<div class="designer-info">
<h3>Marcus Delacroix</h3>
<span>Head of Menswear</span>
<p>Redefining masculine elegance through sculptural tailoring. His suiting has become a uniform for the world's most discerning men.</p>
</div>
</div>
<div class="designer-card reveal" data-designer="2">
<div class="designer-img">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500&auto=format&fit=crop" alt="Yuki Tanaka" loading="lazy" />
<div class="designer-overlay">
<button class="designer-cta">View Profile</button>
</div>
</div>
<div class="designer-info">
<h3>Yuki Tanaka</h3>
<span>Head of Couture</span>
<p>The master hand behind every couture creation. Over 28 years of experience transforming silk, tulle, and imagination into wearable art.</p>
</div>
</div>
<div class="designer-card reveal" data-designer="3">
<div class="designer-img">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&auto=format&fit=crop" alt="Camille Aubert" loading="lazy" />
<div class="designer-overlay">
<button class="designer-cta">View Profile</button>
</div>
</div>
<div class="designer-info">
<h3>Camille Aubert</h3>
<span>Director of Accessories</span>
<p>Elevated the Maison's leather goods to iconic status. Each bag and shoe is designed as a long-term companion, never a trend.</p>
</div>
</div>
</div>
</div>
</section>
<!-- DESIGNER MODAL -->
<div id="designerModal" class="designer-modal">
<div class="designer-modal-inner">
<button class="modal-close" id="designerModalClose">✕</button>
<div class="designer-modal-content">
<div class="dm-image">
<img id="dmImg" src="" alt="" />
</div>
<div class="dm-text">
<span id="dmEyebrow" class="section-eyebrow">Creative Team</span>
<h2 id="dmName"></h2>
<span id="dmRole" class="dm-role"></span>
<div id="dmBio" class="dm-bio"></div>
<div class="dm-works">
<h4>Featured Works</h4>
<div class="dm-works-grid" id="dmWorksGrid"></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================
EDITORIAL
============================= -->
<section id="editorial" class="section-editorial">
<div class="container">
<div class="section-header reveal">
<div class="section-eyebrow">Maison Noir Journal</div>
<h2 class="section-title">Editorial</h2>
</div>
<div class="editorial-grid">
<article class="editorial-featured reveal">
<div class="editorial-img large">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=900&auto=format&fit=crop" alt="Future of Luxury Fashion" loading="lazy" />
<div class="editorial-img-overlay">
<span class="editorial-cat">Culture</span>
<h3>The Future of Luxury Fashion</h3>
<p>How the great houses are redefining desire in an age of uncertainty.</p>
<a href="#" class="btn-read-more">Read Essay <span class="arrow-anim">→</span></a>
</div>
</div>
</article>
<div class="editorial-stack">
<article class="editorial-card reveal">
<div class="editorial-img small">
<img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=500&auto=format&fit=crop" alt="Behind the Runway" loading="lazy" />
</div>
<div class="editorial-card-text">
<span class="editorial-cat">Backstage</span>
<h3>Behind the Runway</h3>
<p>An intimate portrait of the 72 hours that precede a Maison Noir show.</p>
<a href="#" class="btn-read-more">Read <span class="arrow-anim">→</span></a>
</div>
</article>
<article class="editorial-card reveal">
<div class="editorial-img small">
<img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=500&auto=format&fit=crop" alt="Craftsmanship" loading="lazy" />
</div>
<div class="editorial-card-text">
<span class="editorial-cat">Craft</span>
<h3>The Art of Craftsmanship</h3>
<p>Inside the Atelier where every stitch carries a century of knowledge.</p>
<a href="#" class="btn-read-more">Read <span class="arrow-anim">→</span></a>
</div>
</article>
<article class="editorial-card reveal">
<div class="editorial-img small">
<img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=500&auto=format&fit=crop" alt="Modern Icons" loading="lazy" />
</div>
<div class="editorial-card-text">
<span class="editorial-cat">Icons</span>
<h3>Modern Fashion Icons</h3>
<p>The figures who shape how the world dresses — and thinks about itself.</p>
<a href="#" class="btn-read-more">Read <span class="arrow-anim">→</span></a>
</div>
</article>
</div>
</div>
<div class="editorial-bottom-row">
<article class="editorial-wide reveal">
<div class="editorial-img wide">
<img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=700&auto=format&fit=crop" alt="Sustainable Luxury" loading="lazy" />
</div>
<div class="editorial-wide-text">
<span class="editorial-cat">Sustainability</span>
<h3>Sustainable Luxury</h3>
<p>How we are reimagining the supply chain without compromise to beauty.</p>
<a href="#" class="btn-read-more">Read Essay <span class="arrow-anim">→</span></a>
</div>
</article>
<article class="editorial-wide reveal">
<div class="editorial-img wide">
<img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=700&auto=format&fit=crop" alt="Season Preview" loading="lazy" />
</div>
<div class="editorial-wide-text">
<span class="editorial-cat">Season</span>
<h3>SS26 Season Preview</h3>
<p>The first glimpse of what is to come when light returns to the atelier.</p>
<a href="#" class="btn-read-more">Read Essay <span class="arrow-anim">→</span></a>
</div>
</article>
</div>
</div>
</section>
<!-- ============================
TIMELINE
============================= -->
<section class="section-timeline">
<div class="container">
<div class="section-header reveal">
<div class="section-eyebrow">Our Journey</div>
<h2 class="section-title">The Maison Story</h2>
</div>
<div class="timeline">
<div class="timeline-line">
<div class="timeline-progress" id="timelineProgress"></div>
</div>
<div class="timeline-item reveal" data-year="1987">
<div class="timeline-dot"></div>
<div class="timeline-content">
<span class="timeline-year">1987</span>
<h3>Foundation</h3>
<p>Jean-Luc Noir opens a small atelier on Rue du Faubourg Saint-Honoré with a team of eight artisans and a single vision: fashion as architecture.</p>
</div>
<div class="timeline-img">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&auto=format&fit=crop" alt="1987 Foundation" loading="lazy" />
</div>
</div>
<div class="timeline-item reveal" data-year="1992">
<div class="timeline-dot"></div>
<div class="timeline-content">
<span class="timeline-year">1992</span>
<h3>First Collection</h3>
<p>The debut ready-to-wear line receives standing ovations in Paris. Vogue declares it "the most promising debut since Saint Laurent."</p>
</div>
<div class="timeline-img">
<img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=300&auto=format&fit=crop" alt="First Collection" loading="lazy" />
</div>
</div>
<div class="timeline-item reveal" data-year="2001">
<div class="timeline-dot"></div>
<div class="timeline-content">
<span class="timeline-year">2001</span>
<h3>Global Expansion</h3>
<p>Boutiques open in New York, Tokyo, and Milan. The Noir aesthetic crosses continents and becomes a global language of elegance.</p>
</div>
<div class="timeline-img">
<img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=300&auto=format&fit=crop" alt="Global Expansion" loading="lazy" />
</div>
</div>
<div class="timeline-item reveal" data-year="2010">
<div class="timeline-dot"></div>
<div class="timeline-content">
<span class="timeline-year">2010</span>
<h3>Fashion Week Debut</h3>
<p>Maison Noir debuts at Paris Couture Week. The Phantom collection sells out within 48 hours and cements the house's legendary status.</p>
</div>
<div class="timeline-img">
<img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=300&auto=format&fit=crop" alt="Fashion Week" loading="lazy" />
</div>
</div>
<div class="timeline-item reveal" data-year="2025">
<div class="timeline-dot active"></div>
<div class="timeline-content">
<span class="timeline-year">2025</span>
<h3>The Modern Era</h3>
<p>Under Isabelle Noir, the house enters its most celebrated chapter. 124 boutiques. 2,400 artisans. One singular aesthetic — more alive than ever.</p>
</div>
<div class="timeline-img">
<img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=300&auto=format&fit=crop" alt="Modern Era" loading="lazy" />
</div>
</div>
</div>
</div>
</section>
<!-- ============================
CUSTOMER EXPERIENCE
============================= -->
<section class="section-experience">
<div class="container">
<div class="section-header reveal">
<div class="section-eyebrow">The Maison Experience</div>
<h2 class="section-title">Beyond Fashion</h2>
</div>
<div class="experience-grid">
<div class="exp-card reveal">
<div class="exp-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg>
</div>
<h3>Worldwide Delivery</h3>
<p>Complimentary express delivery to over 180 countries. Each order arrives in our signature obsidian packaging.</p>
</div>
<div class="exp-card reveal">
<div class="exp-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3>Exclusive Membership</h3>
<p>The Maison Noir Circle offers early access to new collections, private showings, and invitations to Paris events.</p>
</div>
<div class="exp-card reveal">
<div class="exp-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3>Personal Styling</h3>
<p>One-to-one consultations with a dedicated Maison stylist, available in-boutique or by private appointment.</p>
</div>
<div class="exp-card reveal">
<div class="exp-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<h3>Premium Support</h3>
<p>Concierge service available 24/7. Our client advisors speak 14 languages and offer seamless global assistance.</p>
</div>
<div class="exp-card reveal">
<div class="exp-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<h3>VIP Access</h3>
<p>Front-row invitations to Maison Noir runway shows and private previews of couture pieces before public release.</p>
</div>
<div class="exp-card reveal">
<div class="exp-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M12 22V12"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/><path d="M6.17 17.88a10 10 0 0 0 11.66 0"/></svg>
</div>
<h3>Bespoke Atelier</h3>
<p>Commission a one-of-a-kind piece made entirely for you. The highest expression of Maison Noir craftsmanship.</p>
</div>
</div>
</div>
</section>
<!-- ============================
TESTIMONIALS
============================= -->
<section class="section-testimonials">
<div class="testimonial-bg" style="background-image:url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=1920&auto=format&fit=crop')"></div>
<div class="testimonial-overlay"></div>
<div class="container">
<div class="section-header reveal">
<div class="section-eyebrow light">Voices</div>
<h2 class="section-title light">What They Say</h2>
</div>
<div class="testimonials-carousel">
<div class="testimonial-track" id="testimonialTrack">
<div class="testimonial-slide">
<div class="testimonial-quote">"</div>
<p class="testimonial-text">Maison Noir doesn't just dress you — it reframes how you see yourself. The AW25 coat I commissioned is the single most extraordinary garment I have ever owned.</p>
<div class="testimonial-author">
<img src="https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=100&auto=format&fit=crop&facepad=3" alt="Alexandra V." loading="lazy" />
<div>
<strong>Alexandra V.</strong>
<span>Fashion Editor, Le Monde</span>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial-quote">"</div>
<p class="testimonial-text">The Personal Styling consultation was unlike anything I have experienced in fashion. They understood my wardrobe philosophy in 20 minutes better than I have in 20 years.</p>
<div class="testimonial-author">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&auto=format&fit=crop&facepad=3" alt="James R." loading="lazy" />
<div>
<strong>James R.</strong>
<span>Creative Director, London</span>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial-quote">"</div>
<p class="testimonial-text">I wore the Phantom Gown to the Met Gala. The craftsmanship, the hours of hand-stitching — this is a house that treats every client as if they are the only one.</p>
<div class="testimonial-author">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&facepad=3" alt="Zara M." loading="lazy" />
<div>
<strong>Zara M.</strong>
<span>Actress & Cultural Icon</span>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial-quote">"</div>
<p class="testimonial-text">In 30 years of styling, I have dressed celebrities in everything imaginable. Nothing compares to arriving at a fitting at Maison Noir's Paris atelier. It is pure ceremony.</p>
<div class="testimonial-author">
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=100&auto=format&fit=crop&facepad=3" alt="Claire D." loading="lazy" />
<div>
<strong>Claire D.</strong>
<span>Celebrity Stylist</span>
</div>
</div>
</div>
</div>
<div class="testimonial-controls">
<button class="testi-prev" id="testiPrev">‹</button>
<div class="testi-dots" id="testiDots">
<button class="testi-dot active"></button>
<button class="testi-dot"></button>
<button class="testi-dot"></button>
<button class="testi-dot"></button>
</div>
<button class="testi-next" id="testiNext">›</button>
</div>
</div>
</div>
</section>
<!-- ============================
NEWSLETTER
============================= -->
<section class="section-newsletter">
<div class="newsletter-inner reveal">
<div class="newsletter-text">
<div class="section-eyebrow">The Inner Circle</div>
<h2>Stay Ahead<br><em>of Fashion</em></h2>
<p>Be first to receive Maison Noir collections, invitations, and the stories we only share with those who truly care.</p>
</div>
<div class="newsletter-form-side">
<form class="newsletter-form" id="newsletterForm" novalidate>
<div class="newsletter-input-wrap">
<input type="email" id="newsletterEmail" placeholder="Your email address" autocomplete="email" />
<button type="submit">
<span class="btn-text">Subscribe</span>
<span class="btn-arrow">→</span>
</button>
</div>
<div class="newsletter-error" id="newsletterError">Please enter a valid email address.</div>
<p class="newsletter-note">No noise. Only what matters. Unsubscribe at any time.</p>
</form>
<div class="newsletter-success" id="newsletterSuccess">
<div class="success-icon">✓</div>
<p>Welcome to the Inner Circle.</p>
</div>
</div>
</div>
</section>
<!-- ============================
FOOTER
============================= -->
<footer class="footer">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-logo">MAISON NOIR</div>
<p>The pursuit of perfection. Since 1987.</p>
<div class="footer-socials">
<a href="#" aria-label="Instagram" class="social-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>
</a>
<a href="#" aria-label="Pinterest" class="social-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.24 2.65 7.86 6.39 9.29-.09-.78-.17-1.98.04-2.83.18-.77 1.22-5.17 1.22-5.17s-.31-.63-.31-1.56c0-1.46.85-2.55 1.9-2.55.9 0 1.33.68 1.33 1.49 0 .91-.58 2.27-.88 3.53-.25 1.05.53 1.91 1.56 1.91 1.88 0 3.13-2.4 3.13-5.24 0-2.16-1.46-3.78-4.08-3.78-2.97 0-4.81 2.22-4.81 4.7 0 .85.25 1.45.63 1.9.07.08.08.16.05.26l-.23.93c-.04.14-.13.17-.3.1-1.11-.46-1.63-1.7-1.63-3.1 0-2.89 2.43-6.36 7.25-6.36 3.9 0 6.47 2.83 6.47 5.87 0 4-2.21 7-5.45 7-1.09 0-2.12-.59-2.47-1.26l-.67 2.6c-.24.94-.9 2.12-1.34 2.84.5.15 1.03.23 1.57.23 5.52 0 10-4.48 10-10S17.52 2 12 2z"/></svg>
</a>
<a href="#" aria-label="YouTube" class="social-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.54C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="currentColor" stroke="none"/></svg>
</a>
<a href="#" aria-label="X / Twitter" class="social-link">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
</div>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Collections</h4>
<a href="#">Womenswear</a>
<a href="#">Menswear</a>
<a href="#">Accessories</a>
<a href="#">Couture</a>
<a href="#">Archive</a>
</div>
<div class="footer-col">
<h4>Maison</h4>
<a href="#">About</a>
<a href="#">Our Designers</a>
<a href="#">Sustainability</a>
<a href="#">Careers</a>
<a href="#">Press</a>
</div>
<div class="footer-col">
<h4>Client Services</h4>
<a href="#">Store Locator</a>
<a href="#">Personal Shopping</a>
<a href="#">Alterations</a>
<a href="#">Returns</a>
<a href="#">Contact Us</a>
</div>
<div class="footer-col">
<h4>Newsletter</h4>
<p class="footer-newsletter-text">Receive the latest from Maison Noir directly to your inbox.</p>
<div class="footer-newsletter">
<input type="email" placeholder="Email address" />
<button>→</button>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 Maison Noir. All rights reserved.</span>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Cookie Policy</a>
<a href="#">Legal</a>
</div>
<span>Paris · New York · Tokyo · Milan</span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>CSS:
:root {
--bg: #060404;
--surface: rgba(250, 248, 244, 0.05);
--surface-strong: rgba(250, 248, 244, 0.12);
--text: #f5f1ec;
--muted: #b6afa7;
--accent: #e9d0b4;
--accent-dark: #c3a283;
--border: rgba(255, 255, 255, 0.08);
--shadow: 0 30px 120px rgba(0, 0, 0, 0.24);
--radius: 22px;
--radius-sm: 14px;
--transition: 0.35s ease;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: radial-gradient(circle at top left, rgba(233, 208, 180, 0.08), transparent 28%),
radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.06), transparent 24%),
var(--bg);
color: var(--text);
font-family: "Montserrat", sans-serif;
line-height: 1.65;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
cursor: pointer;
}
#loader {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: var(--bg);
z-index: 9999;
opacity: 1;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hide {
opacity: 0;
visibility: hidden;
}
.loader-inner {
text-align: center;
}
.loader-logo {
font-family: "Playfair Display", serif;
font-size: 2.2rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 1.25rem;
}
.loader-bar {
width: 260px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
margin: 0 auto 1rem;
}
.loader-fill {
width: 0;
height: 100%;
background: linear-gradient(90deg, rgba(233,208,180,1) 0%, rgba(255,255,255,0.85) 100%);
animation: loaderFill 1.8s ease forwards;
}
@keyframes loaderFill {
to { width: 100%; }
}
.loader-tagline {
color: var(--muted);
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.8rem;
}
#cursor,
#cursor-follower {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9998;
transition: transform 0.16s ease, opacity 0.2s ease;
}
#cursor {
width: 10px;
height: 10px;
border: 1px solid rgba(233, 208, 180, 0.9);
border-radius: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}
#cursor-follower {
width: 46px;
height: 46px;
border: 1px solid rgba(233, 208, 180, 0.25);
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.16s ease, opacity 0.2s ease;
}
.cursor-grow {
transform: translate(-50%, -50%) scale(1.35);
}
#navbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 4rem;
background: rgba(6, 4, 4, 0.72);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-left,
.nav-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-logo {
font-family: "Playfair Display", serif;
font-size: 1.1rem;
letter-spacing: 0.4em;
text-transform: uppercase;
}
.nav-link {
color: var(--muted);
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: color var(--transition);
}
.nav-link:hover,
.nav-link:focus {
color: var(--text);
}
.nav-icon,
.nav-hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
background: rgba(255,255,255,0.03);
color: var(--text);
transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.nav-icon:hover,
.nav-hamburger:hover {
transform: translateY(-2px);
border-color: rgba(233, 208, 180, 0.35);
background: rgba(233, 208, 180, 0.06);
}
.nav-hamburger span {
display: block;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 999px;
position: relative;
}
.nav-hamburger span::after,
.nav-hamburger span::before {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 999px;
}
.nav-hamburger span::before { top: -6px; }
.nav-hamburger span::after { top: 6px; }
.mobile-menu {
position: fixed;
inset: 0;
z-index: 45;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
background: rgba(6, 4, 4, 0.92);
}
.mobile-menu.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.mobile-menu-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
}
.mobile-nav a {
display: block;
color: var(--text);
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.18em;
margin: 0.75rem 0;
}
.mobile-footer-links {
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.14em;
display: flex;
gap: 1.5rem;
}
#hero {
min-height: calc(100vh - 84px);
position: relative;
display: grid;
align-items: center;
overflow: hidden;
}
.hero-slides {
position: absolute;
inset: 0;
display: grid;
}
.hero-slide {
grid-area: 1 / 1;
opacity: 0;
transform: scale(1.04);
transition: opacity 1.1s ease, transform 1.1s ease;
background-size: cover;
background-position: center;
}
.hero-slide.active {
opacity: 1;
transform: scale(1);
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,4,4,0.18) 0%, rgba(6,4,4,0.72) 55%, rgba(6,4,4,0.92) 100%);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 780px;
padding: 2rem 4rem;
margin-left: 8vw;
}
.hero-eyebrow {
font-size: 0.82rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
margin-bottom: 1.2rem;
}
.hero-title {
font-family: "Playfair Display", serif;
font-size: clamp(3.5rem, 6vw, 6.8rem);
line-height: 0.95;
letter-spacing: -0.05em;
margin: 0;
}
.hero-title .italic {
font-style: italic;
font-weight: 500;
}
.hero-sub {
max-width: 520px;
margin: 1.6rem 0 2rem;
color: rgba(255,255,255,0.78);
font-size: 1rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.btn-primary,
.btn-ghost,
.btn-text-arrow,
.btn-read-more {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 999px;
transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn-primary {
padding: 1rem 1.9rem;
background: linear-gradient(135deg, rgba(233,208,180,0.95), rgba(255,255,255,0.9));
color: #12110f;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
box-shadow: 0 18px 60px rgba(233, 208, 180, 0.15);
}
.btn-ghost {
padding: 1rem 1.9rem;
background: transparent;
color: var(--text);
border-color: rgba(255,255,255,0.15);
}
.btn-primary:hover,
.btn-ghost:hover,
.btn-text-arrow:hover,
.btn-read-more:hover {
transform: translateY(-2px);
}
.btn-ghost:hover {
border-color: rgba(233, 208, 180, 0.45);
}
.btn-text-arrow {
color: var(--text);
opacity: 0.95;
gap: 0.5rem;
font-weight: 500;
}
.btn-read-more {
margin-top: 1.4rem;
color: var(--text);
border-color: rgba(255,255,255,0.08);
padding: 0.9rem 1.3rem;
}
.hero-scroll-hint {
position: absolute;
bottom: 3.5rem;
left: 8vw;
display: flex;
align-items: center;
gap: 0.85rem;
color: rgba(255,255,255,0.75);
letter-spacing: 0.2em;
font-size: 0.8rem;
text-transform: uppercase;
}
.scroll-line {
width: 1px;
height: 48px;
background: rgba(255,255,255,0.35);
border-radius: 999px;
}
.hero-slide-controls {
position: absolute;
right: 6vw;
bottom: 3.5rem;
display: flex;
gap: 0.75rem;
}
.slide-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.45);
background: transparent;
transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.slide-dot.active {
background: var(--accent);
border-color: var(--accent);
transform: scale(1.1);
}
.hero-counter {
position: absolute;
right: 6vw;
top: 3.5rem;
display: flex;
align-items: center;
gap: 0.7rem;
color: rgba(255,255,255,0.8);
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
letter-spacing: 0.25em;
font-size: 0.9rem;
}
.divider {
color: rgba(255,255,255,0.5);
}
.marquee-strip {
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee-track {
display: flex;
gap: 2.5rem;
padding: 1rem 4rem;
animation: marquee 24s linear infinite;
}
.marquee-track span {
color: var(--muted);
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dot {
color: rgba(255,255,255,0.25);
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.container {
width: min(1200px, calc(100% - 3rem));
margin: 0 auto;
}
.section-header {
max-width: 680px;
margin-bottom: 2.5rem;
}
.section-eyebrow {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.28em;
text-transform: uppercase;
margin-bottom: 0.9rem;
}
.section-title {
font-family: "Playfair Display", serif;
font-size: clamp(2.4rem, 4vw, 4.5rem);
line-height: 1.02;
}
.section-title em,
.video-title em,
.hero-title em {
font-style: italic;
}
.section-collections,
.section-lookbook,
.section-designers,
.section-editorial,
.section-timeline,
.section-experience,
.section-testimonials,
.section-newsletter,
.footer {
position: relative;
}
.section-collections {
padding: 6.5rem 0 4rem;
}
.collection-filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.filter-btn {
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
background: transparent;
color: var(--muted);
padding: 0.9rem 1.35rem;
text-transform: uppercase;
letter-spacing: 0.16em;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
background: rgba(233,208,180,0.1);
color: var(--text);
border-color: rgba(233,208,180,0.28);
}
.collection-grid {
display: grid;
gap: 1.75rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.collection-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius);
overflow: hidden;
position: relative;
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.collection-item:hover {
transform: translateY(-5px);
border-color: rgba(233,208,180,0.18);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.collection-item.large {
grid-column: span 2;
}
.item-image {
position: relative;
overflow: hidden;
}
.item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s ease;
}
.collection-item:hover .item-image img {
transform: scale(1.06);
}
.item-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
background: linear-gradient(180deg, transparent 34%, rgba(6,4,4,0.95) 100%);
}
.item-category,
.item-price {
color: rgba(255,255,255,0.75);
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 0.78rem;
}
.item-name {
margin: 0.4rem 0 0.9rem;
color: var(--text);
font-size: 1.5rem;
}
.item-cta {
align-self: flex-start;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
color: var(--text);
padding: 0.9rem 1.35rem;
border-radius: 999px;
transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.item-cta:hover {
background: rgba(233,208,180,0.14);
transform: translateY(-2px);
}
.item-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.35rem 1.4rem 1.5rem;
}
.item-info span {
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.item-info h3 {
margin: 0;
font-size: 1.18rem;
font-weight: 500;
}
.section-stats {
padding: 4rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.stat-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-family: "Playfair Display", serif;
font-weight: 600;
letter-spacing: -0.05em;
}
.stat-label {
color: var(--muted);
margin-top: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.8rem;
}
.section-lookbook {
padding: 6rem 0;
}
.lookbook-header {
max-width: 780px;
margin-bottom: 2rem;
}
.lookbook-editorial {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
.lookbook-big-img,
.lookbook-small,
.gallery-item,
.editorial-img {
position: relative;
overflow: hidden;
border-radius: var(--radius);
}
.lookbook-big-img img,
.lookbook-small img,
.gallery-item img,
.editorial-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s ease;
}
.lookbook-big-img:hover img,
.lookbook-small:hover img,
.gallery-item:hover img,
.editorial-img:hover img {
transform: scale(1.06);
}
.lookbook-caption,
.lookbook-caption.small {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.4rem 1.6rem;
background: linear-gradient(180deg, rgba(6,4,4,0.03), rgba(6,4,4,0.9));
display: flex;
align-items: flex-end;
gap: 1rem;
}
.lookbook-caption.small {
padding: 1rem;
font-size: 0.96rem;
}
.caption-num {
font-family: "Playfair Display", serif;
font-size: 2.3rem;
color: var(--text);
}
.caption-title {
margin: 0;
font-weight: 500;
color: var(--text);
}
.lookbook-text blockquote {
margin: 0 0 1.6rem;
font-size: 1.45rem;
font-family: "Playfair Display", serif;
line-height: 1.1;
color: var(--text);
}
.lookbook-text p {
max-width: 520px;
color: rgba(255,255,255,0.75);
}
.lookbook-small-grid {
display: grid;
gap: 1rem;
}
.lookbook-small {
min-height: 240px;
}
.lookbook-gallery {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.gallery-hover {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 1.3rem;
color: var(--text);
font-weight: 500;
background: linear-gradient(180deg, transparent 40%, rgba(6,4,4,0.88) 100%);
}
.lightbox,
.video-modal,
.designer-modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(6,4,4,0.9);
z-index: 9997;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.open,
.video-modal.open,
.designer-modal.open {
opacity: 1;
visibility: visible;
}
.lightbox-content,
.designer-modal-content,
.video-modal-inner {
position: relative;
}
.lightbox-content img,
.dm-image img {
width: min(84vw, 920px);
height: auto;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next,
.modal-close,
.video-modal-close {
position: absolute;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.08);
color: var(--text);
display: grid;
place-items: center;
transition: transform var(--transition), background var(--transition);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.modal-close:hover,
.video-modal-close:hover {
transform: translateY(-2px);
background: rgba(233,208,180,0.15);
}
.lightbox-close { top: 28px; right: 28px; }
.lightbox-prev { left: 28px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 28px; top: 50%; transform: translateY(-50%); }
.video-modal-inner,
.designer-modal-inner {
width: min(100%, 920px);
padding: 2rem;
background: rgba(8, 7, 6, 0.95);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.video-placeholder {
min-height: 420px;
display: grid;
place-items: center;
color: var(--text);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
text-align: center;
}
.video-play-center {
font-size: 4rem;
margin-bottom: 1rem;
}
.video-modal-close,
.modal-close {
top: 18px;
right: 18px;
}
.section-video {
position: relative;
min-height: 780px;
display: grid;
align-items: center;
overflow: hidden;
}
.video-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.55) contrast(0.9);
}
.video-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,4,4,0.35), rgba(6,4,4,0.92));
}
.video-content {
position: relative;
z-index: 2;
max-width: 620px;
padding: 3rem 4rem;
margin-left: 8vw;
}
.video-title {
font-family: "Playfair Display", serif;
margin: 1rem 0 1.5rem;
font-size: clamp(3rem, 5vw, 4.5rem);
}
.video-desc {
max-width: 520px;
color: rgba(255,255,255,0.78);
margin-bottom: 2rem;
}
.play-btn {
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
border: none;
background: rgba(233,208,180,0.1);
color: var(--text);
display: grid;
place-items: center;
overflow: hidden;
}
.play-icon {
width: 34px;
height: 34px;
}
.play-ripple {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(233,208,180,0.15);
opacity: 0.5;
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.7); opacity: 0.45; }
50% { transform: scale(1.15); opacity: 0.12; }
100% { transform: scale(0.7); opacity: 0.45; }
}
.video-duration {
display: inline-block;
margin-top: 1.2rem;
color: rgba(255,255,255,0.75);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.85rem;
}
.section-designers {
padding: 5.5rem 0;
}
.designers-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.designer-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
}
.designer-img {
position: relative;
min-height: 320px;
}
.designer-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.designer-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6,4,4,0.05), rgba(6,4,4,0.96));
display: flex;
justify-content: center;
align-items: flex-end;
padding: 1.4rem;
opacity: 0;
transition: opacity var(--transition);
}
.designer-card:hover .designer-overlay {
opacity: 1;
}
.designer-cta {
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
color: var(--text);
padding: 0.9rem 1.35rem;
border-radius: 999px;
}
.designer-info {
padding: 1.6rem;
}
.designer-info h3 {
margin: 0 0 0.35rem;
}
.designer-info span {
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.82rem;
}
.designer-info p {
margin-top: 1rem;
color: rgba(255,255,255,0.74);
}
.designer-modal-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.dm-image {
max-height: 550px;
}
.dm-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dm-text {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dm-role {
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.82rem;
}
.dm-bio {
color: rgba(255,255,255,0.8);
}
.dm-works {
margin-top: 1.5rem;
}
.dm-works-grid {
display: grid;
gap: 0.85rem;
margin-top: 1rem;
}
.dm-works-grid span {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 0.9rem 1rem;
color: var(--text);
}
.section-editorial {
padding: 6rem 0;
}
.editorial-grid {
display: grid;
gap: 1.5rem;
}
.editorial-featured {
position: relative;
}
.editorial-img.large,
.editorial-img.small,
.editorial-img.wide {
border-radius: var(--radius);
overflow: hidden;
min-height: 320px;
}
.editorial-img-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
background: linear-gradient(180deg, transparent 30%, rgba(6,4,4,0.95) 100%);
}
.editorial-cat {
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.78rem;
}
.editorial-img-overlay h3 {
margin: 0.8rem 0 0.7rem;
font-size: 2rem;
}
.editorial-img-overlay p {
max-width: 420px;
color: rgba(255,255,255,0.78);
}
.editorial-card,
.editorial-wide {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius);
overflow: hidden;
}
.editorial-card-text,
.editorial-wide-text {
padding: 1.5rem;
}
.editorial-card-text h3,
.editorial-wide-text h3 {
margin-top: 0.9rem;
}
.editorial-card-text p,
.editorial-wide-text p {
color: rgba(255,255,255,0.78);
}
.arrow-anim {
transition: transform var(--transition);
}
.btn-read-more:hover .arrow-anim {
transform: translateX(4px);
}
.editorial-stack {
display: grid;
gap: 1.5rem;
}
.editorial-bottom-row {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.editorial-wide {
display: grid;
grid-template-columns: 1fr 1fr;
}
.editorial-wide-text {
padding: 2rem;
}
.section-timeline {
padding: 6rem 0;
}
.timeline {
position: relative;
padding-left: 2.5rem;
}
.timeline-line {
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 4px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
}
.timeline-progress {
position: absolute;
left: 30px;
top: 0;
width: 4px;
background: linear-gradient(180deg, rgba(233,208,180,0.95), rgba(233,208,180,0.35));
border-radius: 999px;
height: 0;
}
.timeline-item {
display: grid;
grid-template-columns: 1fr 220px;
gap: 1.5rem;
margin-bottom: 3rem;
align-items: center;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-dot {
position: absolute;
left: 22px;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(233,208,180,0.9);
border: 2px solid var(--bg);
}
.timeline-content {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 1.8rem;
}
.timeline-year {
color: var(--accent);
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.82rem;
}
.timeline-img img {
width: 100%;
border-radius: var(--radius);
}
.section-experience {
padding: 6rem 0;
}
.experience-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.exp-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 2rem;
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.exp-card:hover {
transform: translateY(-4px);
border-color: rgba(233,208,180,0.15);
box-shadow: 0 24px 60px rgba(0,0,0,0.14);
}
.exp-icon {
width: 58px;
height: 58px;
border-radius: 18px;
background: rgba(233,208,180,0.12);
display: grid;
place-items: center;
margin-bottom: 1.3rem;
}
.exp-icon svg {
width: 26px;
height: 26px;
}
.exp-card h3 {
margin: 0 0 1rem;
}
.exp-card p {
color: rgba(255,255,255,0.76);
}
.section-testimonials {
position: relative;
padding: 6rem 0;
}
.testimonial-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.35) blur(1px);
}
.testimonial-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(6,4,4,0.18) 0%, rgba(6,4,4,0.9) 65%);
}
.testimonials-carousel {
position: relative;
z-index: 2;
display: grid;
gap: 2rem;
overflow: hidden;
}
.testimonial-track {
display: flex;
width: 400%;
gap: 1rem;
transform: translateX(0);
transition: transform 0.75s ease;
}
.testimonial-slide {
min-width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 2rem;
display: grid;
gap: 1.4rem;
}
.testimonial-quote {
font-size: 4rem;
line-height: 0.8;
color: rgba(233,208,180,0.75);
}
.testimonial-text {
margin: 0;
color: rgba(255,255,255,0.88);
font-size: 1.02rem;
}
.testimonial-author {
display: flex;
gap: 1rem;
align-items: center;
}
.testimonial-author img {
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-author strong {
display: block;
}
.testimonial-author span {
color: var(--muted);
font-size: 0.9rem;
}
.testimonial-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.testi-prev,
.testi-next {
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
color: var(--text);
}
.testi-dots {
display: flex;
gap: 0.8rem;
}
.testi-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.35);
background: transparent;
}
.testi-dot.active {
background: var(--accent);
border-color: var(--accent);
}
.section-newsletter {
padding: 6rem 0 4rem;
}
.newsletter-inner {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 2rem;
align-items: center;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 3rem;
}
.newsletter-text h2 {
margin: 0.4rem 0 1rem;
font-size: clamp(2.4rem, 4vw, 3.4rem);
line-height: 1.05;
}
.newsletter-text p {
max-width: 520px;
color: rgba(255,255,255,0.78);
}
.newsletter-form-wrap,
.newsletter-form {
display: grid;
}
.newsletter-input-wrap {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
}
.newsletter-input-wrap input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
color: var(--text);
padding: 1rem 1.25rem;
min-width: 0;
}
.newsletter-input-wrap input::placeholder {
color: rgba(255,255,255,0.45);
}
.newsletter-input-wrap button {
border-radius: 999px;
border: none;
background: linear-gradient(135deg, rgba(233,208,180,0.95), rgba(255,255,255,0.9));
color: #12110f;
padding: 1rem 1.5rem;
font-weight: 700;
}
.newsletter-error {
margin-top: 0.95rem;
color: #f26f50;
opacity: 0;
transition: opacity var(--transition);
}
.newsletter-error.visible {
opacity: 1;
}
.newsletter-note {
color: rgba(255,255,255,0.62);
margin-top: 1rem;
font-size: 0.95rem;
}
.newsletter-success {
display: none;
grid-template-columns: auto;
place-items: center;
gap: 1rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
}
.newsletter-success.visible {
display: grid;
}
.success-icon {
width: 72px;
height: 72px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(233,208,180,0.15);
color: var(--accent-dark);
font-size: 2rem;
}
.footer {
padding: 4.5rem 0 2.5rem;
}
.footer-top {
display: grid;
gap: 2rem;
}
.footer-brand {
max-width: 360px;
}
.footer-logo {
font-family: "Playfair Display", serif;
font-size: 1.25rem;
letter-spacing: 0.34em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.footer-brand p {
color: rgba(255,255,255,0.72);
line-height: 1.8;
}
.footer-socials {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-link {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255,255,255,0.04);
color: var(--text);
}
.footer-links {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
.footer-col h4 {
margin: 0 0 1rem;
color: var(--text);
}
.footer-col a,
.footer-newsletter-text,
.footer-newsletter input,
.footer-newsletter button {
color: rgba(255,255,255,0.72);
}
.footer-col a {
display: block;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}
.footer-newsletter {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.footer-newsletter input {
flex: 1;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.05);
padding: 0.95rem 1rem;
}
.footer-newsletter button {
border-radius: 999px;
border: none;
background: rgba(233,208,180,0.15);
color: var(--text);
min-width: 54px;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 1.75rem;
margin-top: 2rem;
}
.footer-bottom-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.footer-bottom-links a {
color: rgba(255,255,255,0.55);
}
.toast-notification {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
background: rgba(8,7,6,0.95);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 1rem 1.3rem;
color: var(--text);
box-shadow: 0 26px 80px rgba(0,0,0,0.35);
z-index: 9999;
opacity: 0;
transform: translateY(20px);
animation: toastIn 0.45s ease forwards;
}
@keyframes toastIn {
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
transform: translateY(25px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1200px) {
#navbar { padding: 1rem 2rem; }
.hero-content { padding: 2rem; margin-left: 4vw; }
.hero-scroll-hint { left: 4vw; }
.hero-slide-controls,
.hero-counter { right: 4vw; }
.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-item.large { grid-column: span 2; }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lookbook-editorial { grid-template-columns: 1fr; }
.editorial-bottom-row { grid-template-columns: 1fr; }
.timeline-item { grid-template-columns: 1fr; padding-left: 0; }
.timeline-label, .timeline-content { margin-left: 0; }
}
@media (max-width: 900px) {
#navbar { flex-wrap: wrap; padding: 1rem 1.25rem; }
.nav-left, .nav-right { gap: 0.8rem; }
.mobile-menu { padding: 3rem; }
.hero-content { padding: 1.5rem; margin-left: 0; }
.hero-actions { flex-direction: column; align-items: stretch; }
.btn-primary, .btn-ghost { width: 100%; }
.collection-grid { grid-template-columns: 1fr; }
.stats-grid, .experience-grid, .footer-links { grid-template-columns: 1fr; }
.designers-grid { grid-template-columns: 1fr; }
.testimonial-track { grid-template-columns: 1fr; }
.testimonial-controls { flex-direction: column; align-items: stretch; }
.lookbook-gallery { grid-template-columns: 1fr; }
.newsletter-inner { grid-template-columns: 1fr; }
.section-header { margin-bottom: 1.5rem; }
.timeline { padding-left: 0; }
.timeline-line { left: 12px; }
.timeline-dot { left: 6px; }
}
@media (max-width: 650px) {
.nav-logo { order: 1; width: 100%; text-align: center; }
.nav-left, .nav-right { width: 100%; justify-content: center; flex-wrap: wrap; }
.nav-link { font-size: 0.8rem; }
.hero-title { font-size: 3rem; }
.hero-counter { position: static; margin-top: 1.5rem; }
.hero-slide-controls { position: static; justify-content: center; margin-top: 1.25rem; }
.lookbook-caption { flex-direction: column; align-items: flex-start; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
THE INTERACTIVITY JAVASCRIPT:
const body = document.body;
const loader = document.getElementById('loader');
const cursor = document.getElementById('cursor');
const follower = document.getElementById('cursor-follower');
const navHamburger = document.getElementById('navHamburger');
const mobileMenu = document.getElementById('mobileMenu');
const slideDots = document.querySelectorAll('.slide-dot');
const slides = document.querySelectorAll('.hero-slide');
const currentSlideLabel = document.getElementById('currentSlide');
const filterButtons = document.querySelectorAll('.filter-btn');
const collectionItems = document.querySelectorAll('.collection-item');
const galleryItems = document.querySelectorAll('.gallery-item');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightboxImg');
const lightboxClose = document.getElementById('lightboxClose');
const lightboxPrev = document.getElementById('lightboxPrev');
const lightboxNext = document.getElementById('lightboxNext');
const designerCards = document.querySelectorAll('.designer-card');
const designerModal = document.getElementById('designerModal');
const designerModalClose = document.getElementById('designerModalClose');
const dmImg = document.getElementById('dmImg');
const dmName = document.getElementById('dmName');
const dmRole = document.getElementById('dmRole');
const dmBio = document.getElementById('dmBio');
const dmWorksGrid = document.getElementById('dmWorksGrid');
const videoModal = document.getElementById('videoModal');
const videoModalClose = document.getElementById('videoModalClose');
const playBtn = document.getElementById('playBtn');
const testimonialTrack = document.getElementById('testimonialTrack');
const testiPrev = document.getElementById('testiPrev');
const testiNext = document.getElementById('testiNext');
const testiDots = document.querySelectorAll('.testi-dot');
const statItems = document.querySelectorAll('.stat-item');
const timelineProgress = document.getElementById('timelineProgress');
const revealElements = document.querySelectorAll('.reveal');
const newsletterForm = document.getElementById('newsletterForm');
const newsletterEmail = document.getElementById('newsletterEmail');
const newsletterError = document.getElementById('newsletterError');
const newsletterSuccess = document.getElementById('newsletterSuccess');
const designerProfiles = [
{
name: 'Isabelle Noir',
role: 'Creative Director',
bio: 'Visionary architect of the Maison\'s singular aesthetic since 2014. Trained at Central Saint Martins, her work synthesises Parisian couture with Tokyo minimalism.',
image: 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=900&auto=format&fit=crop',
works: ['Noir Couture Collection', 'Archival Atelier Series', 'Maison Noir Capsule']
},
{
name: 'Marcus Delacroix',
role: 'Head of Menswear',
bio: 'Redefining masculine elegance through sculptural tailoring. His suiting has become a uniform for the world\'s most discerning men.',
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=900&auto=format&fit=crop',
works: ['Structured Blazer', 'Midnight Suit', 'Formal Minimalism']
},
{
name: 'Yuki Tanaka',
role: 'Head of Couture',
bio: 'The master hand behind every couture creation. Over 28 years of experience transforming silk, tulle, and imagination into wearable art.',
image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&auto=format&fit=crop',
works: ['Phantom Gown', 'Sculpted Evening', 'Ceremony Dress']
},
{
name: 'Camille Aubert',
role: 'Director of Accessories',
bio: 'Elevated the Maison\'s leather goods to iconic status. Each bag and shoe is designed as a long-term companion, never a trend.',
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=900&auto=format&fit=crop',
works: ['Noir Satchel', 'Leather Atelier', 'Signature Heel']
}
];
const testimonialCount = testiDots.length;
let heroIndex = 0;
let heroTimer = null;
let testimonialIndex = 0;
let testimonialTimer = null;
let isMobileMenuOpen = false;
let activeLightboxIndex = 0;
const scrollReveal = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
scrollReveal.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
const animateCounters = (entry) => {
if (!entry.isIntersecting) return;
statItems.forEach((item) => {
const target = parseInt(item.querySelector('.stat-number').dataset.target, 10);
let current = 0;
const step = Math.ceil(target / 50);
const counter = item.querySelector('.stat-number');
const count = setInterval(() => {
current += step;
if (current >= target) {
counter.textContent = target;
clearInterval(count);
} else {
counter.textContent = current;
}
}, 24);
});
statsObserver.disconnect();
};
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => animateCounters(entry));
}, { threshold: 0.35 });
const handleScrollReveal = () => {
revealElements.forEach((el) => scrollReveal.observe(el));
if (statItems.length) {
statsObserver.observe(statItems[0]);
}
};
const updateHeroSlide = (index) => {
slides.forEach((slide, slideIndex) => {
slide.classList.toggle('active', slideIndex === index);
});
slideDots.forEach((dot, dotIndex) => dot.classList.toggle('active', dotIndex === index));
currentSlideLabel.textContent = String(index + 1).padStart(2, '0');
heroIndex = index;
};
const nextHeroSlide = () => {
updateHeroSlide((heroIndex + 1) % slides.length);
};
const startHeroRotation = () => {
heroTimer = setInterval(nextHeroSlide, 7000);
};
const stopHeroRotation = () => {
if (heroTimer) clearInterval(heroTimer);
};
const setFilter = (category) => {
filterButtons.forEach((btn) => btn.classList.toggle('active', btn.dataset.filter === category));
collectionItems.forEach((item) => {
if (category === 'all' || item.dataset.category === category) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
};
const openLightbox = (index) => {
activeLightboxIndex = index;
const selected = galleryItems[index];
lightboxImg.src = selected.querySelector('img').src;
lightbox.classList.add('open');
};
const closeLightbox = () => {
lightbox.classList.remove('open');
};
const changeLightboxImage = (direction) => {
activeLightboxIndex = (activeLightboxIndex + direction + galleryItems.length) % galleryItems.length;
lightboxImg.src = galleryItems[activeLightboxIndex].querySelector('img').src;
};
const openDesignerModal = (profileIndex) => {
const profile = designerProfiles[profileIndex];
dmImg.src = profile.image;
dmName.textContent = profile.name;
dmRole.textContent = profile.role;
dmBio.textContent = profile.bio;
dmWorksGrid.innerHTML = profile.works.map((work) => `<span>${work}</span>`).join('');
designerModal.classList.add('open');
};
const closeDesignerModal = () => {
designerModal.classList.remove('open');
};
const openVideoModal = () => {
videoModal.classList.add('open');
};
const closeVideoModal = () => {
videoModal.classList.remove('open');
};
const updateTestimonialCarousel = (index) => {
testimonialIndex = index;
testimonialTrack.style.transform = `translateX(-${index * 100}%)`;
testiDots.forEach((dot, dotIndex) => dot.classList.toggle('active', dotIndex === index));
};
const nextTestimonial = () => {
updateTestimonialCarousel((testimonialIndex + 1) % testimonialCount);
};
const prevTestimonial = () => {
updateTestimonialCarousel((testimonialIndex - 1 + testimonialCount) % testimonialCount);
};
const startTestimonialRotation = () => {
testimonialTimer = setInterval(nextTestimonial, 9000);
};
const stopTestimonialRotation = () => {
if (testimonialTimer) clearInterval(testimonialTimer);
};
const showToast = (message) => {
const existingToast = document.querySelector('.toast-notification');
if (existingToast) existingToast.remove();
const toast = document.createElement('div');
toast.className = 'toast-notification';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 3600);
};
const updateTimelineProgress = () => {
const timeline = document.querySelector('.timeline');
if (!timeline) return;
const rect = timeline.getBoundingClientRect();
const totalHeight = timeline.scrollHeight - window.innerHeight + 200;
const progress = Math.min(Math.max((window.scrollY - (timeline.offsetTop - window.innerHeight * 0.4)) / totalHeight, 0), 1);
timelineProgress.style.height = `${progress * 100}%`;
};
const validateEmail = (email) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};
const disableCustomCursor = () => {
if (window.matchMedia('(hover: none)').matches || /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
cursor.style.display = 'none';
follower.style.display = 'none';
return true;
}
return false;
};
window.addEventListener('load', () => {
loader.classList.add('hide');
setTimeout(() => loader.remove(), 800);
if (!disableCustomCursor()) {
document.addEventListener('mousemove', (e) => {
cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
follower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});
document.querySelectorAll('button, a, .item-cta, .gallery-item, .designer-card, .nav-icon, .nav-hamburger').forEach((element) => {
element.addEventListener('mouseenter', () => {
follower.classList.add('cursor-grow');
});
element.addEventListener('mouseleave', () => {
follower.classList.remove('cursor-grow');
});
});
}
handleScrollReveal();
updateTimelineProgress();
startHeroRotation();
startTestimonialRotation();
});
document.addEventListener('scroll', () => {
updateTimelineProgress();
});
navHamburger.addEventListener('click', () => {
isMobileMenuOpen = !isMobileMenuOpen;
mobileMenu.classList.toggle('open', isMobileMenuOpen);
});
mobileMenu.addEventListener('click', (event) => {
if (event.target === mobileMenu) {
isMobileMenuOpen = false;
mobileMenu.classList.remove('open');
}
});
slideDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
updateHeroSlide(index);
stopHeroRotation();
startHeroRotation();
});
});
filterButtons.forEach((button) => {
button.addEventListener('click', () => setFilter(button.dataset.filter));
});
document.querySelectorAll('.item-cta').forEach((cta) => {
cta.addEventListener('click', (event) => {
event.preventDefault();
const product = cta.closest('.collection-item').querySelector('.item-name').textContent;
showToast(`${product} has been added to your selection`);
});
});
galleryItems.forEach((item) => {
item.addEventListener('click', () => {
openLightbox(parseInt(item.dataset.index, 10));
stopHeroRotation();
});
});
lightboxClose.addEventListener('click', closeLightbox);
lightboxPrev.addEventListener('click', () => changeLightboxImage(-1));
lightboxNext.addEventListener('click', () => changeLightboxImage(1));
lightbox.addEventListener('click', (event) => {
if (event.target === lightbox) closeLightbox();
});
designerCards.forEach((card) => {
card.addEventListener('click', () => {
const index = parseInt(card.dataset.designer, 10);
openDesignerModal(index);
});
});
designerModalClose.addEventListener('click', closeDesignerModal);
designerModal.addEventListener('click', (event) => {
if (event.target === designerModal) closeDesignerModal();
});
playBtn.addEventListener('click', openVideoModal);
videoModalClose.addEventListener('click', closeVideoModal);
videoModal.addEventListener('click', (event) => {
if (event.target === videoModal) closeVideoModal();
});
testiPrev.addEventListener('click', () => {
prevTestimonial();
stopTestimonialRotation();
startTestimonialRotation();
});
testiNext.addEventListener('click', () => {
nextTestimonial();
stopTestimonialRotation();
startTestimonialRotation();
});
testiDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
updateTestimonialCarousel(index);
stopTestimonialRotation();
startTestimonialRotation();
});
});
newsletterForm.addEventListener('submit', (event) => {
event.preventDefault();
const emailValue = newsletterEmail.value.trim();
if (!validateEmail(emailValue)) {
newsletterError.classList.add('visible');
newsletterSuccess.classList.remove('visible');
return;
}
newsletterError.classList.remove('visible');
newsletterSuccess.classList.add('visible');
newsletterForm.reset();
showToast('Your subscription is confirmed. Welcome to the Inner Circle.');
});
updateHeroSlide(0);
updateTestimonialCarousel(0);
setFilter('all');