website_designs

Italo Disco Design Reference

Italo Disco is a music genre and associated visual aesthetic that originated in Italy in the late 1970s and peaked during the mid-1980s. Its visual identity is futuristic, romantic, and often unabashedly campy, presenting a polished, aspirational, and often surreal fantasy world. The aesthetic is defined by soft airbrushed illustration, neon-lit cityscapes, chrome and metallic surfaces, laser grids, and glamorous figures in stylized sci-fi settings. It combines romantic melancholy with futuristic wonder, filtered through a distinctly European sensibility – escapist, sincere, and unapologetically kitsch.

---

Visual Characteristics

Core Motifs and Patterns

• Soft airbrushed illustration – dreamy, hyper-real quality inspired by 12-inch vinyl sleeve artwork by artists like Giampaolo Cecchini
• Neon lights and neon-lit cityscapes – glowing urban skylines, illuminated signage, electric horizons
• Laser grids and geometric patterns – perspective grids receding into infinity, wireframe landscapes, grid floors
• Chrome and metallic surfaces – reflective silver elements, polished metal textures, gleaming accents
• Cosmic and space backgrounds – starfields, nebulae, planetary horizons, deep space gradients
• Palm trees and tropical elements – exotic, escapist landscape motifs silhouetted against sunset skies
• Glamorous fashion figures – elegantly dressed, often melancholic characters in stylized poses
• Sci-fi machinery – robots, futuristic vehicles, space stations, synthesizers rendered in airbrush
• Sunset and sunrise gradients – warm-to-cool transitions across dramatic skies
• Bold, high-contrast color schemes – vivid neons against deep darks

Design Principles

• Escapism-driven design philosophy – every element transports the viewer to an idealized, fantastical world
• Romantic sincerity paired with kitsch sensibility – glamour is earnest, not ironic
• Retrofuturistic optimism – the future imagined through 1980s European eyes, full of wonder
• High contrast and saturation – bold neons against dark or deep-toned backgrounds
• Airbrushed smoothness – soft gradients, no hard edges, everything blends and glows
• Layered atmospheric depth – foreground figures, midground architecture, background cosmos
• Centered, symmetrical hero compositions – figures and focal elements dominate the center
• Blend of high fashion and science fiction – couture meets cosmos
• Melancholic grandeur – beauty tinged with wistfulness and longing

---

Color Palette

Primary Scheme

Role	Colors
Background	Deep midnight blue, black, dark purple
Primary neon accents	Hot magenta/pink, electric cyan, vivid violet
Warm accents	Neon orange, sunset gold, coral pink
Metallic elements	Chrome silver, polished gold, brushed steel
Atmospheric	Soft lavender, pale turquoise, dusky rose

Detailed Palette

Color	Hex	Usage
Midnight Black	#0A0A14	Deep backgrounds, space voids
Cosmic Navy	#0D0B2E	Primary dark background, night sky base
Deep Purple	#1A0533	Secondary background, depth layering
Hot Magenta	#FF2975	Primary neon accent, highlights, glows
Electric Cyan	#00E5FF	Laser grids, neon outlines, tech elements
Vivid Violet	#8C1EFF	Secondary neon accent, cosmic elements
Neon Orange	#FF901F	Sunset accents, warm neon highlights
Sunset Gold	#FFD319	Golden hour glow, luxury accents
Coral Pink	#FF6B8A	Romantic elements, soft neon warmth
Soft Lavender	#C4A1FF	Atmospheric haze, airbrushed transitions
Pale Turquoise	#6DF1D8	Cool atmospheric glow, secondary neon
Chrome Silver	#C0C0C0	Metallic surfaces, chrome text
Bright Chrome	#E8E8E8	Metallic highlights, reflective peaks
Dusky Rose	#B8506E	Muted romantic accent, figure elements
Palm Silhouette	#1B0A2E	Tropical silhouettes against gradients

Suggested CSS Custom Properties

:root {
  /* Deep backgrounds */
  --italo-black: #0a0a14;
  --italo-navy: #0d0b2e;
  --italo-purple-deep: #1a0533;
  --italo-purple-dark: #2a0845;

  /* Neon accents */
  --italo-magenta: #ff2975;
  --italo-cyan: #00e5ff;
  --italo-violet: #8c1eff;
  --italo-orange: #ff901f;
  --italo-gold: #ffd319;
  --italo-coral: #ff6b8a;

  /* Atmospheric tones */
  --italo-lavender: #c4a1ff;
  --italo-turquoise: #6df1d8;
  --italo-rose: #b8506e;
  --italo-sky: #5c2c6d;

  /* Metallics */
  --italo-chrome: #c0c0c0;
  --italo-chrome-bright: #e8e8e8;
  --italo-chrome-dark: #808080;
  --italo-gold-metallic: #d4a843;

  /* Neon glows (for box-shadow / text-shadow) */
  --italo-glow-magenta: rgba(255, 41, 117, 0.6);
  --italo-glow-cyan: rgba(0, 229, 255, 0.6);
  --italo-glow-violet: rgba(140, 30, 255, 0.5);
  --italo-glow-orange: rgba(255, 144, 31, 0.5);

  /* Functional mappings */
  --italo-bg-primary: var(--italo-navy);
  --italo-bg-secondary: var(--italo-purple-deep);
  --italo-bg-surface: var(--italo-purple-dark);
  --italo-text-primary: var(--italo-chrome-bright);
  --italo-text-secondary: var(--italo-lavender);
  --italo-accent-primary: var(--italo-magenta);
  --italo-accent-secondary: var(--italo-cyan);
  --italo-border: rgba(140, 30, 255, 0.3);
}

Approaches

• Dark-to-vivid contrast – deep navy/purple backgrounds with neon accents that pop aggressively
• Sunset gradient sweeps – gold to magenta to violet to navy horizontal or diagonal gradients
• Neon-on-dark – bright line elements and text glowing against near-black backgrounds
• Chrome metallic accents – silver and gold gradients for text and decorative elements
• Atmospheric color layering – soft lavender and turquoise washes creating depth and haze
• Complementary neon pairing – magenta + cyan as the iconic dual-neon combination

---

Typography

Typeface Characteristics

Italo Disco typography combines several distinct modes drawn from its vinyl cover art heritage:

• Bold, condensed sans-serifs – high-impact display type for titles (Futura Extra Bold Condensed was used on original covers)
• Flowing script and brush typefaces – romantic, cursive lettering for artist names and subtitles (Brush Script appeared on original covers)
• Geometric display fonts – clean, futuristic letterforms for technological/space themes
• Extended and wide-set tracking – airy, aspirational spacing on headlines
• Metallic and neon text effects – chrome gradients, glowing outlines, and neon tube styling
• Italic and oblique variants – conveying speed, movement, and dynamism
• Mixed case with dramatic sizing – large display text paired with delicate secondary type
• ALL CAPS for impact – display headlines shouting with disco energy

Recommended Web Fonts (Google Fonts)

Font	Style	Usage
Syncopate	Wide, geometric, uppercase-feeling	Primary headlines, hero display
Orbitron	Geometric, square, futuristic	Futuristic/tech headings, numbers
Righteous	Rounded, retro, display	Section titles, warm retro feel
Pacifico	Flowing script, brush-like	Romantic accents, script overlays
Dancing Script	Elegant cursive	Artist-name-style script elements
Montserrat	Geometric sans, versatile	Subheadings, UI text
Jost	Geometric, Futura-inspired	Body text, clean headlines
Inter	Clean, neutral, modern	Body text, readability
Oswald	Condensed, bold sans	Bold condensed headlines
Exo 2	Geometric, futuristic sans	Tech-themed headings, labels

Typography CSS Example

/* Hero / Display headlines -- big, bold, neon-glowing */
.italo-display {
  font-family: 'Syncopate', 'Orbitron', sans-serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--italo-chrome-bright);
  text-shadow:
    0 0 10px var(--italo-glow-magenta),
    0 0 40px var(--italo-glow-magenta),
    0 0 80px rgba(255, 41, 117, 0.3);
}

/* Section headlines */
h1, h2, h3 {
  font-family: 'Righteous', 'Jost', sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--italo-chrome-bright);
}

/* Script / romantic accent text */
.italo-script {
  font-family: 'Pacifico', 'Dancing Script', cursive;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 400;
  font-style: normal;
  color: var(--italo-coral);
  text-shadow:
    0 0 8px var(--italo-glow-magenta),
    0 0 20px rgba(255, 107, 138, 0.3);
}

/* Body text */
body {
  font-family: 'Inter', 'Jost', sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--italo-text-secondary);
}

/* Chrome metallic text effect */
.italo-chrome-text {
  font-family: 'Oswald', 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #e8e8e8 25%,
    #808080 50%,
    #c0c0c0 75%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Small technical/label text */
.italo-label {
  font-family: 'Exo 2', 'Montserrat', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--italo-cyan);
  text-shadow: 0 0 6px var(--italo-glow-cyan);
}

---

Layout Principles

Grid and Structure

• Full-bleed hero sections – dramatic, edge-to-edge visuals dominating above the fold
• Centered, symmetrical compositions – content gravitates to center axis, mirroring album cover layouts
• Generous vertical spacing – sections breathe with ample padding, evoking open cosmic spaces
• Wide aspect ratios – landscape-oriented sections referencing widescreen cinematic framing
• Layered parallax depth – background starfields, midground grids, foreground content create z-depth
• Diagonal and angular dividers – slanted section breaks adding dynamism and movement
• Grid floors / perspective grids – laser-grid elements as decorative section backgrounds

Section Organization

• Use neon gradient dividers between sections (magenta-to-cyan fading lines)
• Apply atmospheric background gradients that shift color as user scrolls (navy to purple to deep black)
• Create hierarchy through glow intensity – brighter neon glow = more important element
• Employ card/panel layouts with neon borders – content contained in softly glowing frames
• Use large typographic headers – oversized display text as section anchors
• Overlay decorative grid patterns at low opacity behind content sections
• Place palm tree or cityscape silhouettes as decorative section edges

Responsive Considerations

• Hero display text scales fluidly with clamp() – dramatic on desktop, still bold on mobile
• Neon glow effects can be reduced on mobile for performance (fewer shadow layers)
• Laser grid backgrounds can simplify to solid gradients on small screens
• Maintain generous padding – the spacious, cosmic feel should not be lost at any breakpoint

---

CSS/Design Techniques

Neon Glow Text Effect

/* Hot magenta neon text */
.neon-magenta {
  color: var(--italo-magenta);
  text-shadow:
    0 0 7px var(--italo-magenta),
    0 0 10px var(--italo-magenta),
    0 0 21px var(--italo-magenta),
    0 0 42px rgba(255, 41, 117, 0.5),
    0 0 82px rgba(255, 41, 117, 0.3),
    0 0 92px rgba(255, 41, 117, 0.2);
}

/* Electric cyan neon text */
.neon-cyan {
  color: var(--italo-cyan);
  text-shadow:
    0 0 7px var(--italo-cyan),
    0 0 10px var(--italo-cyan),
    0 0 21px var(--italo-cyan),
    0 0 42px rgba(0, 229, 255, 0.5),
    0 0 82px rgba(0, 229, 255, 0.3),
    0 0 92px rgba(0, 229, 255, 0.2);
}

/* Flickering neon animation */
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 7px var(--italo-magenta),
      0 0 10px var(--italo-magenta),
      0 0 21px var(--italo-magenta),
      0 0 42px rgba(255, 41, 117, 0.5),
      0 0 82px rgba(255, 41, 117, 0.3);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

.neon-flicker {
  animation: neon-flicker 3s infinite alternate;
}

Sunset Gradient Background

/* Classic Italo Disco sunset sky */
.italo-sunset {
  background: linear-gradient(
    180deg,
    #0d0b2e 0%,       /* cosmic navy top */
    #1a0533 15%,       /* deep purple */
    #5c2c6d 30%,       /* dusky violet */
    #b8506e 45%,       /* rose horizon */
    #ff6b8a 55%,       /* coral pink band */
    #ff901f 65%,       /* neon orange glow */
    #ffd319 75%,       /* golden sun */
    #ff2975 85%,       /* magenta lower glow */
    #1a0533 100%       /* fade to deep */
  );
}

/* Simplified two-tone gradient for sections */
.italo-gradient-section {
  background: linear-gradient(
    135deg,
    var(--italo-navy) 0%,
    var(--italo-purple-deep) 50%,
    var(--italo-purple-dark) 100%
  );
}

Laser Grid / Perspective Floor

/* Perspective laser grid (classic 80s floor effect) */
.laser-grid {
  position: relative;
  overflow: hidden;
}

.laser-grid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 50%;
  background:
    linear-gradient(
      rgba(0, 229, 255, 0.15) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 229, 255, 0.15) 1px,
      transparent 1px
    );
  background-size: 60px 40px;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
}

Neon Border Card / Panel

.italo-card {
  background: rgba(13, 11, 46, 0.85);
  border: 1px solid rgba(140, 30, 255, 0.3);
  border-radius: 4px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 15px rgba(140, 30, 255, 0.15),
    inset 0 0 30px rgba(13, 11, 46, 0.5);
  backdrop-filter: blur(10px);
}

/* Neon top-edge highlight */
.italo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--italo-magenta) 30%,
    var(--italo-cyan) 70%,
    transparent
  );
  box-shadow: 0 0 10px var(--italo-glow-magenta);
}

/* Hover glow intensification */
.italo-card:hover {
  border-color: rgba(255, 41, 117, 0.5);
  box-shadow:
    0 0 20px rgba(255, 41, 117, 0.2),
    0 0 40px rgba(140, 30, 255, 0.1),
    inset 0 0 30px rgba(13, 11, 46, 0.5);
  transition: all 0.4s ease;
}

Chrome Metallic Gradient Effect

/* Chrome text for display headings */
.italo-chrome-display {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #e8e8e8 20%,
    #808080 45%,
    #b0b0b0 55%,
    #e0e0e0 80%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Gold metallic variant */
.italo-gold-display {
  background: linear-gradient(
    180deg,
    #ffd700 0%,
    #d4a843 30%,
    #8b6914 50%,
    #d4a843 70%,
    #ffd700 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Airbrushed Glow / Soft Light Effect

/* Airbrushed radial glow -- place behind hero elements */
.airbrush-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 41, 117, 0.3) 0%,
    rgba(140, 30, 255, 0.15) 40%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Secondary cyan glow */
.airbrush-glow-cyan {
  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.25) 0%,
    rgba(109, 241, 216, 0.1) 40%,
    transparent 70%
  );
  filter: blur(80px);
}

Neon Line Divider

/* Magenta-to-cyan gradient divider */
.italo-divider {
  width: 60%;
  margin: 3rem auto;
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--italo-magenta) 20%,
    var(--italo-cyan) 80%,
    transparent
  );
  box-shadow:
    0 0 8px var(--italo-glow-magenta),
    0 0 16px rgba(0, 229, 255, 0.3);
}

Palm Tree Silhouette (CSS-only Decorative)

/* Palm tree silhouette decoration (positioned absolutely) */
.palm-silhouette {
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 200px;
  background: var(--italo-black);
  clip-path: polygon(
    50% 0%, 30% 15%, 5% 10%, 25% 25%, 0% 30%,
    20% 35%, 10% 45%, 30% 42%, 25% 55%, 38% 48%,
    45% 100%, 55% 100%, 62% 48%, 75% 55%, 70% 42%,
    90% 45%, 80% 35%, 100% 30%, 75% 25%, 95% 10%,
    70% 15%, 50% 0%
  );
  opacity: 0.6;
}

Starfield Background Animation

/* Twinkling starfield */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 20% 80%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 60% 90%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 35%, rgba(200, 180, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, rgba(180, 220, 255, 0.7), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}

Neon Button

.italo-button {
  display: inline-block;
  padding: 0.8rem 2.5rem;
  border: 2px solid var(--italo-magenta);
  border-radius: 2px;
  background: transparent;
  color: var(--italo-magenta);
  font-family: 'Montserrat', 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow:
    0 0 8px var(--italo-glow-magenta),
    inset 0 0 8px rgba(255, 41, 117, 0.1);
}

.italo-button:hover {
  background: var(--italo-magenta);
  color: #ffffff;
  box-shadow:
    0 0 15px var(--italo-glow-magenta),
    0 0 40px rgba(255, 41, 117, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Cyan variant */
.italo-button--cyan {
  border-color: var(--italo-cyan);
  color: var(--italo-cyan);
  box-shadow:
    0 0 8px var(--italo-glow-cyan),
    inset 0 0 8px rgba(0, 229, 255, 0.1);
}

.italo-button--cyan:hover {
  background: var(--italo-cyan);
  color: var(--italo-black);
  box-shadow:
    0 0 15px var(--italo-glow-cyan),
    0 0 40px rgba(0, 229, 255, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
}

---

Materials and Textures (Visual Metaphors for Web)

Physical Italo Disco motifs and their web equivalents:

Physical Reference	Web Equivalent
Neon tube signage	Text with multi-layered text-shadow in neon colors, optional flicker animation
Airbrushed illustration	Large radial-gradient blurs, soft color transitions, filter: blur() on decorative elements
Laser grid floor	CSS grid pattern with perspective transform, fading with mask-image
Chrome/metallic surfaces	Multi-stop linear-gradient on text using background-clip: text
Cosmic starfield	Multiple radial-gradient dots at random positions, subtle twinkle animation
Sunset sky	Vertical linear-gradient with 6-8 color stops from gold through pink to deep purple
Palm tree silhouette	Dark clip-path shapes positioned absolutely against gradient backgrounds
Vinyl record grooves	Concentric repeating-radial-gradient circles at low opacity
Smoke machine haze	Semi-transparent radial-gradient overlays with high blur, low opacity
Disco ball reflections	Small bright dots scattered via radial-gradient, gentle animation

---

Imagery and Photography Guidelines

When sourcing or creating imagery for an Italo Disco styled site:

• Favor airbrushed or digitally smoothed illustrations over raw photography
• Apply heavy color grading to any photographs – push toward magenta/cyan split-toning
• Use silhouettes of cityscapes, palm trees, and figures against gradient skies
• Add lens flare and light leak effects for authenticity
• Feature geometric wireframe elements layered over images
• Incorporate retro-futuristic subjects – synthesizers, sports cars, skylines, space imagery
• Keep human figures stylized – glamorous, fashion-forward, slightly idealized
• Avoid stark realism – everything should feel slightly dreamlike and polished

---

Related Aesthetics

Aesthetic	Relationship to Italo Disco
Disco	Direct parent genre; Italo Disco inherits the glamour and dancefloor energy
Synthwave	Modern descendant; reinterprets Italo Disco visuals with contemporary tools
Vaporwave	Samples and recontextualizes Italo Disco’s melodic synthetic qualities, more ironic
Laser Grid	Shares the perspective grid motif; more focused on the single visual element
New Wave	Contemporary movement; shares neon, angular design, and synth culture
Paninaro	Italian subcultural style overlapping with Italo Disco’s fashion sensibility
Retrofuturism	Broader parent category encompassing the future-as-imagined-in-the-past motif
Chromecore	Shares metallic/chrome elements, though rooted in 2000s rather than 1980s

---

Quick-Start: Minimal Italo Disco Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Italo Disco Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Righteous&family=Pacifico&family=Inter:wght@300;400&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --italo-black: #0a0a14;
      --italo-navy: #0d0b2e;
      --italo-purple-deep: #1a0533;
      --italo-magenta: #ff2975;
      --italo-cyan: #00e5ff;
      --italo-violet: #8c1eff;
      --italo-coral: #ff6b8a;
      --italo-lavender: #c4a1ff;
      --italo-chrome-bright: #e8e8e8;
      --italo-glow-magenta: rgba(255, 41, 117, 0.6);
      --italo-glow-cyan: rgba(0, 229, 255, 0.6);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: linear-gradient(180deg, var(--italo-navy) 0%, var(--italo-purple-deep) 50%, var(--italo-black) 100%);
      color: var(--italo-lavender);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      letter-spacing: 0.02em;
      line-height: 1.7;
      min-height: 100vh;
    }

    .hero {
      text-align: center;
      padding: 8rem 2rem 6rem;
      position: relative;
      overflow: hidden;
    }

    /* Airbrushed glow behind title */
    .hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 41, 117, 0.2) 0%, rgba(140, 30, 255, 0.1) 40%, transparent 70%);
      filter: blur(60px);
      pointer-events: none;
    }

    .hero h1 {
      font-family: 'Syncopate', sans-serif;
      font-size: clamp(2rem, 6vw, 5rem);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--italo-chrome-bright);
      text-shadow:
        0 0 10px var(--italo-glow-magenta),
        0 0 40px var(--italo-glow-magenta),
        0 0 80px rgba(255, 41, 117, 0.2);
      position: relative;
      z-index: 1;
    }

    .hero .script-subtitle {
      font-family: 'Pacifico', cursive;
      font-size: clamp(1.2rem, 3vw, 2rem);
      color: var(--italo-coral);
      margin-top: 1rem;
      text-shadow: 0 0 12px rgba(255, 107, 138, 0.4);
      position: relative;
      z-index: 1;
    }

    .italo-divider {
      width: 50%;
      margin: 3rem auto;
      border: none;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--italo-magenta) 20%, var(--italo-cyan) 80%, transparent);
      box-shadow: 0 0 8px var(--italo-glow-magenta), 0 0 16px rgba(0, 229, 255, 0.3);
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    section h2 {
      font-family: 'Righteous', sans-serif;
      font-size: 1.8rem;
      letter-spacing: 0.06em;
      color: var(--italo-cyan);
      text-shadow: 0 0 8px var(--italo-glow-cyan);
      margin-bottom: 1.5rem;
    }

    .italo-card {
      background: rgba(13, 11, 46, 0.85);
      border: 1px solid rgba(140, 30, 255, 0.3);
      border-radius: 4px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(140, 30, 255, 0.15);
      backdrop-filter: blur(10px);
    }

    .italo-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 5%;
      right: 5%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--italo-magenta) 30%, var(--italo-cyan) 70%, transparent);
    }

    .italo-button {
      display: inline-block;
      margin-top: 2rem;
      padding: 0.8rem 2.5rem;
      border: 2px solid var(--italo-magenta);
      border-radius: 2px;
      background: transparent;
      color: var(--italo-magenta);
      font-family: 'Montserrat', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 8px var(--italo-glow-magenta), inset 0 0 8px rgba(255, 41, 117, 0.1);
    }

    .italo-button:hover {
      background: var(--italo-magenta);
      color: #ffffff;
      box-shadow: 0 0 15px var(--italo-glow-magenta), 0 0 40px rgba(255, 41, 117, 0.3);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <p class="script-subtitle">una notte magica</p>
  </div>
  <hr class="italo-divider">
  <section>
    <div class="italo-card">
      <h2>Section Heading</h2>
      <p>Content styled with the Italo Disco aesthetic -- neon glows, deep cosmic backgrounds, and romantic European flair.</p>
      <a href="#" class="italo-button">Explore</a>
    </div>
  </section>
</body>
</html>

This site is open source. Improve this page.