Agence WagnerAgence Wagner
FRENDEELS
Zruck züe de Designs
MaximalisteÉlégantSombreOrnemental
Vorschau

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

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>
← Zruck züe de Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alli Rächt vorbehalt.

Designs vu chrislemke/website_designs, lizenziert unter MIT.