website_designs

Mob Wife Design Reference

Overview

Mob Wife is a bold, maximalist aesthetic inspired by the romanticized portrayal of Mafia wives in popular culture, drawing from iconic characters like Carmela Soprano in The Sopranos, Karen Hill in Goodfellas, and Elvira Hancock in Scarface. The trend exploded on TikTok in January 2024 when creator Kayla Trivieri declared it the year of the mob wife, quickly amassing hundreds of millions of views across related hashtags. Defined by leopard print, chunky gold jewelry, fur coats, dark smoky eyes, voluminous hair, and unapologetic opulence, the aesthetic is a deliberate rejection of the minimalist Clean Girl trend that preceded it. In web and UI design, Mob Wife translates into dark, luxurious interfaces with rich textures like velvet and animal print, heavy gold accents, dramatic serif and display typography, and a sense of lavish confidence that commands attention. The digital expression draws from Italian Baroque grandeur, 1980s and 1990s maximalist glamour, and the high-contrast drama of noir cinema to create interfaces that feel expensive, powerful, and unapologetically bold.

Visual Characteristics

Core Design Traits

Leopard and animal print textures: Repeating leopard, snakeskin, or crocodile patterns used as background textures, section accents, divider strips, and decorative overlays throughout the design
Rich gold and metallic accents: Chunky gold borders, gilded dividers, metallic gradient highlights, and gold-toned decorative elements that evoke heavy jewelry and opulent accessories
Dark, dramatic backgrounds: Deep blacks, near-black burgundies, and rich espresso browns that create a moody, cinematic foundation for all content
Velvet and fur textures: Soft, plush texture overlays and subtle noise patterns that suggest velvet upholstery, mink coats, and luxurious fabric surfaces
High-contrast typography: Bold, commanding display type in gold or cream against dark backgrounds, with dramatic scale differences between headings and body text
Smoky gradients and vignettes: Dark-to-darker radial gradients, heavy vignetting, and smoky overlay effects that echo the dramatic makeup of the aesthetic
Ornate Italian-Baroque frames: Decorative gold borders, scrollwork corners, and ornamental frames inspired by Italian Renaissance and Baroque decorative arts
Glossy and lacquered surfaces: Elements with subtle sheen effects, glossy button treatments, and reflective surfaces that suggest patent leather and polished gold
Oversized, confident scale: Large hero sections, bold type sizes, and generous proportions that communicate dominance and unapologetic presence

Design Principles

Command the room: Every element should feel like it demands attention; nothing whispers in Mob Wife design
Opulence over restraint: Layer textures, metallics, and dark richness; this is maximalism with purpose and power
Dark drama as foundation: Begin with deep, moody backgrounds and build upward with gold and cream highlights
Texture is everything: Flat surfaces feel lifeless in this aesthetic; always layer animal prints, velvet textures, or subtle noise
Gold is the signature: Treat gold accents the way a mob wife wears jewelry, generously but with intention and a sense of status
Italian glamour meets American excess: Balance old-world European ornamental elegance with bold, brash American confidence
Confidence without apology: The design should feel powerful and self-assured, never tentative or understated

Color Palette

Swatch	Hex	Role
Noir Black	`#0D0B0A`	Primary background, deepest surface
Espresso	`#1C1210`	Card and panel backgrounds
Dark Mahogany	`#2A1A14`	Elevated surface, sidebar backgrounds
Burgundy Wine	`#5C1A2A`	Accent backgrounds, hover states
Blood Red	`#8B1A1A`	Call-to-action emphasis, danger accent
Merlot	`#722F37`	Secondary accent, active states
Antique Gold	`#D4A843`	Primary accent, borders, highlights
Champagne Gold	`#E8C872`	Light gold for text highlights, icons
Warm Cream	`#F5E6C8`	Primary text on dark backgrounds
Leopard Tan	`#C8956C`	Leopard print base, warm mid-tone
Leopard Dark	`#5C3A1E`	Leopard print spots, dark warm accent
Smoke Gray	`#3A3535`	Muted borders, secondary surfaces
Obsidian	`#151111`	Deep shadows, overlay backgrounds
Lacquer Red	`#A62030`	Bold lips accent, vibrant highlight
Fur Brown	`#6B4226`	Warm brown for texture and detail

CSS Custom Properties

:root {
  --mw-noir: #0D0B0A;
  --mw-espresso: #1C1210;
  --mw-mahogany: #2A1A14;
  --mw-burgundy: #5C1A2A;
  --mw-blood-red: #8B1A1A;
  --mw-merlot: #722F37;
  --mw-gold: #D4A843;
  --mw-champagne: #E8C872;
  --mw-cream: #F5E6C8;
  --mw-leopard-tan: #C8956C;
  --mw-leopard-dark: #5C3A1E;
  --mw-smoke: #3A3535;
  --mw-obsidian: #151111;
  --mw-lacquer: #A62030;
  --mw-fur: #6B4226;
}

Typography

Recommended Google Fonts

Font	Weight(s)	Usage	Link
Playfair Display	400, 600, 700, 900	Display headings; dramatic high-contrast serif with Italian editorial flair	Playfair Display
Cinzel Decorative	400, 700, 900	Hero titles and logo text; ornate Roman-inspired display capitals	Cinzel Decorative
Cormorant Garamond	300, 400, 500, 600, 700	Body text; elegant and refined with old-world sophistication	Cormorant Garamond
Cinzel	400, 500, 600, 700	Navigation, labels, and small caps; commanding uppercase serif	Cinzel
Italiana	400	Subheadings and pull quotes; sleek Italian-inspired display serif	Italiana
Bodoni Moda	400, 500, 600, 700, 900	Alternate display heading; extreme contrast Bodoni style	Bodoni Moda
Montserrat	300, 400, 500, 600	UI elements and captions; clean geometric sans for secondary text	Montserrat

Font Pairing Suggestions

Heading	Body	Mood
Cinzel Decorative 700	Cormorant Garamond 400	Grand Italian opulence, theatrical power
Playfair Display 900	Montserrat 400	Bold editorial glamour, modern luxury
Bodoni Moda 700	Cormorant Garamond 400	High-fashion magazine, Versace-inspired
Cinzel 600	Italiana 400	Classical authority, Mediterranean elegance
Playfair Display 700 italic	Cormorant Garamond 300	Dramatic romance, cinematic sophistication

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

body {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--mw-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mw-champagne);
}

.display-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mw-gold);
  text-shadow: 0 2px 20px rgba(212, 168, 67, 0.3);
}

.nav-link {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mw-cream);
}

.caption {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mw-leopard-tan);
}

Layout Principles

Full-bleed dark canvases: Use edge-to-edge dark backgrounds with layered textures; this aesthetic does not want white space borders or light page margins
Asymmetric drama: Offset hero text, use off-center image placements, and break grid alignment to create a sense of confident rule-breaking
Generous scale for hero sections: Hero areas should be tall (80-100vh) and imposing, with oversized typography and dramatic background treatments
Layered depth through shadows: Multiple shadow layers with warm-tinted blacks and deep burgundy create a sense of velvet-draped depth
Gold-framed content sections: Use thin gold border lines, ornamental corner elements, and decorative horizontal rules to delineate sections
Two-column magazine layouts: Emulate luxury fashion editorial spreads with image-heavy grids, pull quotes, and dramatic whitespace within a dark frame
Vertical luxury rhythm: Maintain 60-100px spacing between major sections; let the darkness breathe between content blocks
Responsive approach: On mobile, maintain the dark drama and gold accents; stack columns vertically and scale hero type to at least 2rem; never sacrifice the leopard textures or gold borders

CSS / Design Techniques

Mob Wife Card

.mw-card {
  background: var(--mw-espresso);
  border: 1px solid rgba(212, 168, 67, 0.20);
  border-radius: 2px;
  padding: 40px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.mw-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mw-burgundy), var(--mw-gold), var(--mw-burgundy));
}

.mw-card::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgba(212, 168, 67, 0.08);
  pointer-events: none;
}

Gold Accent Button

.mw-button {
  background: linear-gradient(135deg, var(--mw-gold) 0%, var(--mw-champagne) 50%, var(--mw-gold) 100%);
  color: var(--mw-noir);
  border: none;
  border-radius: 0;
  padding: 16px 40px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(212, 168, 67, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.mw-button:hover {
  box-shadow:
    0 6px 24px rgba(212, 168, 67, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.mw-button-outline {
  background: transparent;
  color: var(--mw-gold);
  border: 2px solid var(--mw-gold);
  border-radius: 0;
  padding: 14px 36px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mw-button-outline:hover {
  background: var(--mw-gold);
  color: var(--mw-noir);
  box-shadow: 0 0 24px rgba(212, 168, 67, 0.35);
}

.mw-nav {
  background: rgba(13, 11, 10, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 168, 67, 0.15);
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mw-nav-brand {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mw-gold);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
}

.mw-nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.mw-nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mw-cream);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
}

.mw-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--mw-gold);
  transition: width 0.3s ease;
}

.mw-nav-links a:hover {
  color: var(--mw-gold);
}

.mw-nav-links a:hover::after {
  width: 100%;
}

Hero Section

.mw-hero {
  min-height: 90vh;
  background: var(--mw-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}

.mw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(92, 26, 42, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(212, 168, 67, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.mw-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 10, 0.3) 0%, transparent 30%, transparent 70%, rgba(13, 11, 10, 0.6) 100%);
  pointer-events: none;
}

.mw-hero-content {
  position: relative;
  z-index: 1;
}

.mw-hero h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--mw-champagne);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-shadow: 0 4px 30px rgba(212, 168, 67, 0.25);
}

.mw-hero .tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--mw-leopard-tan);
  margin-top: 20px;
  letter-spacing: 0.04em;
}

.mw-hero .subtitle {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--mw-gold);
  margin-bottom: 12px;
}

Leopard Print CSS Pattern

.mw-leopard-pattern {
  background-color: #C8956C;
  background-image:
    radial-gradient(ellipse at 20% 50%, #5C3A1E 8px, transparent 8px),
    radial-gradient(ellipse at 75% 20%, #5C3A1E 6px, transparent 6px),
    radial-gradient(ellipse at 50% 80%, #5C3A1E 7px, transparent 7px),
    radial-gradient(ellipse at 10% 15%, #5C3A1E 5px, transparent 5px),
    radial-gradient(ellipse at 90% 70%, #5C3A1E 6px, transparent 6px),
    radial-gradient(ellipse at 40% 35%, #5C3A1E 9px, transparent 9px),
    radial-gradient(ellipse at 65% 55%, #5C3A1E 5px, transparent 5px),
    radial-gradient(ellipse at 30% 90%, #5C3A1E 7px, transparent 7px),
    radial-gradient(circle at 22% 52%, rgba(42, 26, 20, 0.3) 12px, transparent 12px),
    radial-gradient(circle at 77% 22%, rgba(42, 26, 20, 0.3) 10px, transparent 10px),
    radial-gradient(circle at 52% 82%, rgba(42, 26, 20, 0.3) 11px, transparent 11px),
    radial-gradient(circle at 42% 37%, rgba(42, 26, 20, 0.3) 13px, transparent 13px);
  background-size: 120px 120px;
}

/* Leopard accent strip for dividers and borders */
.mw-leopard-strip {
  height: 6px;
  width: 100%;
  background-color: #C8956C;
  background-image:
    radial-gradient(ellipse at 15% 50%, #5C3A1E 3px, transparent 3px),
    radial-gradient(ellipse at 40% 50%, #5C3A1E 2px, transparent 2px),
    radial-gradient(ellipse at 65% 50%, #5C3A1E 3px, transparent 3px),
    radial-gradient(ellipse at 85% 50%, #5C3A1E 2px, transparent 2px);
  background-size: 40px 6px;
}

Gold Ornamental Divider

.mw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 64px 0;
  padding: 0 40px;
}

.mw-divider::before,
.mw-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mw-gold), transparent);
}

.mw-divider span {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.5rem;
  color: var(--mw-gold);
  text-shadow: 0 0 12px rgba(212, 168, 67, 0.3);
  line-height: 1;
}

/* Ornate double-line variant */
.mw-divider-ornate {
  text-align: center;
  margin: 64px auto;
  max-width: 500px;
  position: relative;
  padding: 12px 0;
}

.mw-divider-ornate::before,
.mw-divider-ornate::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--mw-gold) 30%, var(--mw-gold) 70%, transparent 95%);
}

.mw-divider-ornate::before { top: 0; }
.mw-divider-ornate::after { bottom: 0; }

.mw-divider-ornate span {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.85rem;
  color: var(--mw-gold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

Velvet Texture Background

.mw-velvet-bg {
  background: var(--mw-espresso);
  position: relative;
}

.mw-velvet-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  pointer-events: none;
}

/* Dark burgundy velvet variant */
.mw-velvet-burgundy {
  background: linear-gradient(135deg, var(--mw-espresso) 0%, var(--mw-burgundy) 50%, var(--mw-espresso) 100%);
}

Glossy Lacquer Effect

.mw-lacquer {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.15) 100%
  ), var(--mw-burgundy);
  border: 1px solid rgba(212, 168, 67, 0.15);
  border-radius: 2px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Glossy gold badge / label */
.mw-gold-badge {
  display: inline-block;
  padding: 6px 20px;
  background: linear-gradient(180deg, var(--mw-champagne) 0%, var(--mw-gold) 50%, #B8922E 100%);
  color: var(--mw-noir);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  box-shadow:
    0 2px 8px rgba(212, 168, 67, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

Design Do’s and Don’ts

Do’s

Use deep, dark backgrounds with warm brown and burgundy undertones as the foundation for all layouts
Apply gold metallic accents generously for borders, dividers, headings, and interactive elements
Incorporate leopard print and animal textures as decorative accents, section backgrounds, or border strips
Choose dramatic, high-contrast serif typefaces with strong Italian or fashion-editorial character
Use sharp corners (0-4px border-radius) for a commanding, structured feel
Layer multiple shadow depths with warm-toned blacks to create a plush, velvet-like depth
Apply subtle noise or grain textures to backgrounds to simulate velvet and fur surfaces
Use italic serif type for taglines and pull quotes to echo cinematic title cards
Treat gold as the primary accent color, using it consistently across all interactive and decorative elements
Include ornamental dividers and decorative rules between sections for an opulent editorial feel

Don’ts

Avoid pastel colors, bright whites, or airy compositions that contradict the dark, bold foundation
Do not use rounded, bubbly UI elements or playful illustrations that undermine the powerful tone
Avoid thin, lightweight sans-serif fonts as primary headings; they lack the necessary drama and weight
Do not mix in neon, electric, or cyberpunk color accents that clash with the warm, earthy opulence
Avoid flat, textureless surfaces; every panel and background should have depth and materiality
Do not use excessive whitespace or minimalist grid layouts; Mob Wife design fills the space with confidence
Avoid cute or whimsical iconography; all graphic elements should feel luxurious and slightly dangerous
Do not use pure white (#FFFFFF) text; warm cream (#F5E6C8) or champagne tones integrate better with the dark palette
Avoid small, timid typography; headings should be bold, oversized, and impossible to ignore

Aesthetic	Relationship
Dark Academia	Shares the dark, warm palette and classical serif typography but Dark Academia is scholarly and restrained while Mob Wife is brash and glamorous
Maximalism	Both reject minimalism and embrace bold, layered visual excess; Mob Wife channels that energy specifically through Italian luxury and danger
Art Deco	Shares gold metallic accents and dramatic geometric patterns; Art Deco is more streamlined and symmetrical while Mob Wife is more textural and organic
Baroque	Both celebrate ornate opulence and dramatic richness; Baroque is more historically formal while Mob Wife adds modern edge and animal print
Hollywood Regency	Shares the love of glamour, metallics, and high-drama interiors; Hollywood Regency is mid-century polished while Mob Wife is grittier
Indie Sleaze	Both emerged as maximalist reactions to minimalist trends; Indie Sleaze is scrappy and party-focused while Mob Wife is polished and powerful
Monochrome Luxe	Shares dark palettes and luxury emphasis but Monochrome Luxe strips away color while Mob Wife layers in gold, burgundy, and animal print
Coquette	Both are TikTok-era fashion-to-design aesthetics centered on femininity; Coquette is soft and pastel while Mob Wife is dark and commanding

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob Wife Layout</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --mw-noir: #0D0B0A;
      --mw-espresso: #1C1210;
      --mw-mahogany: #2A1A14;
      --mw-burgundy: #5C1A2A;
      --mw-blood-red: #8B1A1A;
      --mw-merlot: #722F37;
      --mw-gold: #D4A843;
      --mw-champagne: #E8C872;
      --mw-cream: #F5E6C8;
      --mw-leopard-tan: #C8956C;
      --mw-leopard-dark: #5C3A1E;
      --mw-smoke: #3A3535;
      --mw-obsidian: #151111;
      --mw-lacquer: #A62030;
      --mw-fur: #6B4226;
    }

    body {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1.15rem;
      line-height: 1.8;
      color: var(--mw-cream);
      background: var(--mw-noir);
      min-height: 100vh;
    }

    /* --- Navigation --- */
    nav {
      background: rgba(13, 11, 10, 0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(212, 168, 67, 0.15);
      padding: 18px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .brand {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--mw-gold);
      text-decoration: none;
      letter-spacing: 0.06em;
    }

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--mw-cream);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      padding: 6px 0;
      position: relative;
      transition: color 0.3s ease;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--mw-gold);
      transition: width 0.3s ease;
    }

    .nav-links a:hover {
      color: var(--mw-gold);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    /* --- Hero --- */
    .hero {
      min-height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 40px;
      position: relative;
      overflow: hidden;
      background: var(--mw-noir);
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 25% 50%, rgba(92, 26, 42, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 40%, rgba(212, 168, 67, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(107, 66, 38, 0.15) 0%, transparent 40%);
      pointer-events: none;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13,11,10,0.2) 0%, transparent 30%, transparent 70%, rgba(13,11,10,0.5) 100%);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .hero .pre-title {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      color: var(--mw-gold);
      margin-bottom: 16px;
    }

    .hero h1 {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(2.5rem, 6vw, 5rem);
      font-weight: 700;
      color: var(--mw-champagne);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.1;
      text-shadow: 0 4px 30px rgba(212, 168, 67, 0.2);
    }

    .hero .tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-style: italic;
      color: var(--mw-leopard-tan);
      margin-top: 24px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      letter-spacing: 0.02em;
    }

    .hero .cta-row {
      margin-top: 40px;
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* --- Leopard Strip --- */
    .leopard-strip {
      height: 5px;
      width: 100%;
      background-color: var(--mw-leopard-tan);
      background-image:
        radial-gradient(ellipse at 15% 50%, var(--mw-leopard-dark) 3px, transparent 3px),
        radial-gradient(ellipse at 40% 50%, var(--mw-leopard-dark) 2px, transparent 2px),
        radial-gradient(ellipse at 65% 50%, var(--mw-leopard-dark) 3px, transparent 3px),
        radial-gradient(ellipse at 85% 50%, var(--mw-leopard-dark) 2px, transparent 2px);
      background-size: 40px 5px;
    }

    /* --- Buttons --- */
    .btn-gold {
      display: inline-block;
      background: linear-gradient(135deg, var(--mw-gold) 0%, var(--mw-champagne) 50%, var(--mw-gold) 100%);
      color: var(--mw-noir);
      border: none;
      padding: 16px 40px;
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(212, 168, 67, 0.30);
      transition: all 0.3s ease;
    }

    .btn-gold:hover {
      box-shadow: 0 6px 24px rgba(212, 168, 67, 0.50);
      transform: translateY(-2px);
    }

    .btn-outline {
      display: inline-block;
      background: transparent;
      color: var(--mw-gold);
      border: 2px solid var(--mw-gold);
      padding: 14px 36px;
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-outline:hover {
      background: var(--mw-gold);
      color: var(--mw-noir);
      box-shadow: 0 0 24px rgba(212, 168, 67, 0.35);
    }

    /* --- Divider --- */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin: 56px auto;
      max-width: 600px;
      padding: 0 24px;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--mw-gold), transparent);
    }

    .divider span {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.5rem;
      color: var(--mw-gold);
      text-shadow: 0 0 12px rgba(212, 168, 67, 0.3);
      line-height: 1;
    }

    /* --- Content Section --- */
    .section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 60px 40px;
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--mw-champagne);
      text-align: center;
      margin-bottom: 12px;
    }

    .section-subtitle {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mw-leopard-tan);
      text-align: center;
      margin-bottom: 48px;
    }

    /* --- Cards Grid --- */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 32px;
    }

    .card {
      background: var(--mw-espresso);
      border: 1px solid rgba(212, 168, 67, 0.15);
      padding: 36px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 168, 67, 0.08);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--mw-burgundy), var(--mw-gold), var(--mw-burgundy));
    }

    .card .card-label {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--mw-gold);
      margin-bottom: 12px;
    }

    .card h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--mw-champagne);
      margin-bottom: 12px;
    }

    .card p {
      color: var(--mw-cream);
      line-height: 1.75;
      opacity: 0.85;
    }

    /* --- Feature Banner --- */
    .banner {
      background: linear-gradient(135deg, var(--mw-mahogany) 0%, var(--mw-burgundy) 50%, var(--mw-mahogany) 100%);
      border-top: 1px solid rgba(212, 168, 67, 0.12);
      border-bottom: 1px solid rgba(212, 168, 67, 0.12);
      padding: 60px 40px;
      text-align: center;
      position: relative;
    }

    .banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    .banner blockquote {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-style: italic;
      font-weight: 400;
      color: var(--mw-champagne);
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.6;
      position: relative;
    }

    .banner blockquote::before {
      content: '\201C';
      font-family: 'Cinzel Decorative', serif;
      font-size: 4rem;
      color: var(--mw-gold);
      position: absolute;
      top: -30px;
      left: -30px;
      line-height: 1;
      opacity: 0.6;
    }

    .banner cite {
      display: block;
      font-family: 'Montserrat', sans-serif;
      font-style: normal;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--mw-gold);
      margin-top: 20px;
    }

    /* --- Footer --- */
    footer {
      background: var(--mw-obsidian);
      border-top: 1px solid rgba(212, 168, 67, 0.1);
      padding: 40px;
      text-align: center;
    }

    footer .footer-brand {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1rem;
      color: var(--mw-gold);
      margin-bottom: 12px;
    }

    footer p {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.75rem;
      color: var(--mw-smoke);
      letter-spacing: 0.06em;
    }

    /* --- Responsive --- */
    @media (max-width: 768px) {
      nav {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
      }

      .nav-links {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .hero {
        min-height: 70vh;
        padding: 60px 20px;
      }

      .hero h1 {
        font-size: 2.2rem;
      }

      .section {
        padding: 40px 20px;
      }

      .cards {
        grid-template-columns: 1fr;
      }

      .banner blockquote {
        font-size: 1.2rem;
      }

      .banner blockquote::before {
        position: static;
        display: block;
        font-size: 3rem;
        margin-bottom: -20px;
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#" class="brand">La Famiglia</a>
    <ul class="nav-links">
      <li><a href="#">Collection</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <div class="hero-content">
      <p class="pre-title">Unapologetic Opulence</p>
      <h1>Mob Wife</h1>
      <p class="tagline">Leopard print, gold jewelry, fur coats, and the kind of
        confidence that turns every room into your runway.</p>
      <div class="cta-row">
        <a href="#" class="btn-gold">Enter the World</a>
        <a href="#" class="btn-outline">View Collection</a>
      </div>
    </div>
  </header>

  <!-- Leopard Strip -->
  <div class="leopard-strip"></div>

  <!-- Divider -->
  <div class="divider"><span>&#10022;</span></div>

  <!-- Content Cards -->
  <section class="section">
    <h2 class="section-title">The Essentials</h2>
    <p class="section-subtitle">What every mob wife needs</p>
    <div class="cards">
      <div class="card">
        <p class="card-label">Statement Piece</p>
        <h3>The Fur Coat</h3>
        <p>A full-length fur draped over the shoulders is the armor
          of the mob wife. Vintage, oversized, and impossible to ignore.</p>
      </div>
      <div class="card">
        <p class="card-label">Signature Print</p>
        <h3>Leopard Everything</h3>
        <p>From head to toe or as a single bold accent, leopard print
          is the neutral of the unapologetic. It goes with power.</p>
      </div>
      <div class="card">
        <p class="card-label">The Finishing Touch</p>
        <h3>Gold Chains</h3>
        <p>Chunky, layered, and unmistakably expensive. Gold jewelry
          is not an accessory here. It is a declaration of status.</p>
      </div>
    </div>
  </section>

  <!-- Quote Banner -->
  <div class="leopard-strip"></div>
  <section class="banner">
    <blockquote>
      More is more. Subtlety is for people who are afraid
      to take up space.
      <cite>The Mob Wife Manifesto</cite>
    </blockquote>
  </section>
  <div class="leopard-strip"></div>

  <!-- Divider -->
  <div class="divider"><span>&#10022;</span></div>

  <!-- Footer -->
  <footer>
    <p class="footer-brand">La Famiglia</p>
    <p>Bold glamour. Dark drama. Unapologetic opulence.</p>
  </footer>

</body>
</html>

This site is open source. Improve this page.