
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');


ketorolac tromethamine absorption
ketorolac tromethamine absorption
ivermectin rosacea efficacy
ivermectin rosacea efficacy
ivermectin safety expert summary
ivermectin safety expert summary
minoxidil onset professional guide
minoxidil onset professional guide
avanafil reaction‑related information
avanafil reaction‑related information
vardenafil side effect list
vardenafil side effect list
compare tadalafil and sildenafil
compare tadalafil and sildenafil
Sildenafil vs vardenafil PD comparison
Sildenafil vs vardenafil PD comparison
Brand vs Generic Duration Differences
Brand vs Generic Duration Differences
information on PDE5 inhibitors
information on PDE5 inhibitors