Pastel Goth is a subcultural aesthetic that fuses the soft, dreamy sweetness of pastel colors with the dark, macabre imagery of gothic subculture. Born on Tumblr around 2010-2012, it emerged from online communities that blended Japanese kawaii and Harajuku fashion sensibilities with Western goth motifs – skulls, bats, crosses, pentagrams, coffins, crescent moons, and bones rendered in candy-soft lavenders, baby pinks, mint greens, and lilacs against a foundation of black. The aesthetic’s philosophy centers on duality: the acceptance that softness and darkness, fragility and fierceness, cuteness and creepiness are not contradictions but complements. In web and UI design, Pastel Goth translates to dark backgrounds illuminated by pastel-colored elements, occult-inspired iconography used as decorative accents, dripping and melting visual effects, and typography that pairs elegant gothic serifs with bubbly rounded sans-serifs. The result is an interface that feels simultaneously inviting and unsettling – a digital space where a sugar skull sits comfortably beside a pink bow.
| Color Name | Hex | Role / Usage |
|---|---|---|
| Void Black | #1A1A1A |
Primary background, deepest surface layer |
| Coffin Gray | #2D2D2D |
Card backgrounds, elevated surfaces, secondary panels |
| Tombstone | #4A4A4A |
Borders, dividers, muted UI elements, disabled states |
| Spectral Lilac | #C8A2C8 |
Primary accent, headings, interactive highlight color |
| Ghost Lavender | #D8B4FE |
Secondary accent, hover states, decorative gradient endpoints |
| Pale Orchid | #E9D5FF |
Light accent backgrounds, tag fills, soft highlights |
| Crypt Pink | #F9A8D4 |
Primary pink accent, buttons, links, call-to-action elements |
| Baby Fang | #FBBDD9 |
Secondary pink, notification badges, soft card accents |
| Blush Bone | #FDE7F0 |
Light pink backgrounds, card surfaces on light theme variants |
| Hex Mint | #A7F3D0 |
Tertiary accent, success states, decorative color contrast |
| Witch Water | #99F6E4 |
Alternate cool accent, hover effects, info badges |
| Potion Blue | #BAE6FD |
Informational accents, secondary cool interactive elements |
| Skull White | #F5F0F6 |
Primary text on dark backgrounds, light theme surface color |
| Bat Wing | #6B21A8 |
Deep purple accent, active states, dark decorative elements |
| Moon Glow | #FEF3C7 |
Warning states, star accents, warm highlight sparkles |
:root {
/* Backgrounds */
--pg-bg-void: #1a1a1a;
--pg-bg-coffin: #2d2d2d;
--pg-bg-tombstone: #4a4a4a;
/* Purple / Lavender family */
--pg-lilac: #c8a2c8;
--pg-lavender: #d8b4fe;
--pg-orchid: #e9d5ff;
--pg-bat-wing: #6b21a8;
/* Pink family */
--pg-pink: #f9a8d4;
--pg-baby-pink: #fbbdd9;
--pg-blush: #fde7f0;
/* Mint / Cool family */
--pg-mint: #a7f3d0;
--pg-witch-water: #99f6e4;
--pg-potion-blue: #bae6fd;
/* Neutrals and warm accents */
--pg-white: #f5f0f6;
--pg-moon: #fef3c7;
/* Glows (used for box-shadow and text-shadow) */
--pg-glow-lilac: 0 0 12px rgba(200, 162, 200, 0.5), 0 0 40px rgba(200, 162, 200, 0.15);
--pg-glow-pink: 0 0 12px rgba(249, 168, 212, 0.5), 0 0 40px rgba(249, 168, 212, 0.15);
--pg-glow-mint: 0 0 12px rgba(167, 243, 208, 0.5), 0 0 40px rgba(167, 243, 208, 0.15);
/* Borders */
--pg-border: 1px solid rgba(200, 162, 200, 0.2);
--pg-border-bright: 1px solid rgba(200, 162, 200, 0.5);
}
| Font | Style | Best For |
|---|---|---|
| Comfortaa | Rounded, wide, geometric | Headlines, display text, hero sections |
| Quicksand | Rounded geometric sans-serif | Body text, general UI, approachable readability |
| Fredoka | Bubbly, bold, playful | Headings, buttons, call-to-action labels |
| UnifrakturCook | Blackletter / Fraktur | Gothic accent headings, decorative logo text (use sparingly) |
| Satisfy | Casual cursive script | Accent taglines, decorative quotes, handwritten flourishes |
| Nunito | Rounded sans-serif | Clean body text, navigation, alternative to Quicksand |
| Permanent Marker | Handwritten, bold marker | Grunge accent headings, rebellious emphasis text |
| Bangers | Comic-book bold | Impact headings, sticker-style labels, punk-cute elements |
| Patrick Hand | Casual handwriting | Personal notes, diary-style sections, annotation labels |
| Sacramento | Elegant flowing script | Decorative flourishes, romantic gothic accents |
| Heading Font | Body Font | Character |
|---|---|---|
| Comfortaa (700) | Quicksand (400) | Classic pastel goth: bubbly, rounded, approachable |
| Fredoka (600) | Nunito (400) | Playful and bold, sticker-shop aesthetic |
| UnifrakturCook (700) | Quicksand (400) | Maximum contrast: gothic blackletter meets kawaii softness |
| Bangers (400) | Patrick Hand (400) | Zine-inspired, DIY punk-cute mashup |
| Satisfy (400) | Quicksand (400) | Romantic goth, dreamy and elegant with modern body text |
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Quicksand:wght@400;500;600&family=UnifrakturCook:wght@700&family=Satisfy&display=swap');
/* Headings -- bubbly and rounded */
h1, h2, h3, h4, h5, h6 {
font-family: 'Comfortaa', 'Nunito', sans-serif;
font-weight: 700;
color: var(--pg-lavender);
line-height: 1.3;
letter-spacing: 0.02em;
}
/* Display / Hero text with pastel glow */
.pg-display {
font-family: 'Comfortaa', sans-serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
color: var(--pg-pink);
text-shadow: 0 0 20px rgba(249, 168, 212, 0.5), 0 0 60px rgba(249, 168, 212, 0.15);
}
/* Gothic accent heading -- use sparingly for decorative impact */
.pg-gothic {
font-family: 'UnifrakturCook', cursive;
font-weight: 700;
font-size: 2rem;
color: var(--pg-lilac);
text-shadow: 0 0 15px rgba(200, 162, 200, 0.4);
}
/* Body text -- soft and rounded */
body {
font-family: 'Quicksand', 'Nunito', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: var(--pg-white);
font-weight: 400;
}
/* Handwritten accent text */
.pg-handwritten {
font-family: 'Satisfy', cursive;
font-size: 1.4rem;
color: var(--pg-pink);
}
/* UI labels */
.pg-label {
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pg-lilac);
}
#1A1A1A or #2D2D2D) as the primary canvas; pastel-colored cards, text, and accents float above like luminous objects in shadowrgba(200, 162, 200, 0.15)) rather than pure black.pg-card {
background: rgba(45, 45, 45, 0.8);
border: 2px solid rgba(200, 162, 200, 0.2);
border-radius: 16px;
padding: 28px;
position: relative;
backdrop-filter: blur(8px);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.pg-card:hover {
border-color: rgba(249, 168, 212, 0.5);
box-shadow: var(--pg-glow-pink);
transform: translateY(-4px);
}
/* Decorative skull accent in corner */
.pg-card::before {
content: '\2620';
position: absolute;
top: -12px;
right: 20px;
font-size: 1.4rem;
background: var(--pg-bg-void);
padding: 0 8px;
color: var(--pg-lavender);
}
/* Card grid layout */
.pg-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.pg-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, var(--pg-pink), var(--pg-lavender));
color: var(--pg-bg-void);
border: none;
border-radius: 50px;
padding: 14px 36px;
font-family: 'Comfortaa', sans-serif;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(249, 168, 212, 0.3);
}
.pg-button:hover {
box-shadow: var(--pg-glow-pink);
transform: translateY(-2px);
filter: brightness(1.1);
}
/* Ghost / outline variant */
.pg-button--ghost {
background: transparent;
color: var(--pg-pink);
border: 2px solid var(--pg-pink);
box-shadow: none;
}
.pg-button--ghost:hover {
background: rgba(249, 168, 212, 0.1);
box-shadow: var(--pg-glow-pink);
}
/* Mint variant */
.pg-button--mint {
background: linear-gradient(135deg, var(--pg-mint), var(--pg-witch-water));
}
.pg-button--mint:hover {
box-shadow: var(--pg-glow-mint);
}
.pg-nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 16px 32px;
background: rgba(26, 26, 26, 0.9);
backdrop-filter: blur(12px);
border-bottom: 2px solid rgba(200, 162, 200, 0.15);
}
.pg-nav__logo {
font-family: 'UnifrakturCook', cursive;
font-weight: 700;
font-size: 1.4rem;
color: var(--pg-lavender);
text-decoration: none;
text-shadow: 0 0 10px rgba(216, 180, 254, 0.4);
}
.pg-nav__links {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.pg-nav__links a {
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: 0.85rem;
color: var(--pg-white);
text-decoration: none;
padding: 8px 18px;
border-radius: 50px;
transition: all 0.2s ease;
}
.pg-nav__links a:hover,
.pg-nav__links a.active {
background: rgba(249, 168, 212, 0.15);
color: var(--pg-pink);
}
.pg-hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 32px;
background: var(--pg-bg-void);
overflow: hidden;
}
/* Gradient orb background glow */
.pg-hero::before {
content: '';
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(
circle,
rgba(200, 162, 200, 0.15) 0%,
rgba(249, 168, 212, 0.08) 40%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
}
/* Subtle starfield overlay */
.pg-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 15% 25%, rgba(216, 180, 254, 0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 45% 65%, rgba(249, 168, 212, 0.3) 0%, transparent 100%),
radial-gradient(1px 1px at 75% 15%, rgba(167, 243, 208, 0.3) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 85% 75%, rgba(216, 180, 254, 0.3) 0%, transparent 100%),
radial-gradient(1px 1px at 25% 85%, rgba(249, 168, 212, 0.3) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.pg-hero__content {
position: relative;
z-index: 2;
max-width: 700px;
}
.pg-hero__content h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--pg-lavender);
text-shadow: 0 0 30px rgba(216, 180, 254, 0.4), 0 0 80px rgba(216, 180, 254, 0.1);
margin-bottom: 1rem;
}
.pg-hero__content p {
font-size: 1.1rem;
color: rgba(245, 240, 246, 0.7);
max-width: 550px;
margin: 0 auto 2.5rem;
line-height: 1.8;
}
@media (max-width: 768px) {
.pg-hero {
min-height: auto;
padding: 60px 20px;
}
}
.pg-drip-divider {
position: relative;
height: 40px;
overflow: hidden;
}
.pg-drip-divider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--pg-lavender), var(--pg-pink), var(--pg-mint), var(--pg-lavender));
}
.pg-drip-divider::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background:
radial-gradient(ellipse 12px 20px at 10% 0%, var(--pg-lavender) 50%, transparent 50%),
radial-gradient(ellipse 8px 28px at 25% 0%, var(--pg-pink) 50%, transparent 50%),
radial-gradient(ellipse 10px 16px at 42% 0%, var(--pg-mint) 50%, transparent 50%),
radial-gradient(ellipse 14px 24px at 60% 0%, var(--pg-lavender) 50%, transparent 50%),
radial-gradient(ellipse 8px 32px at 78% 0%, var(--pg-pink) 50%, transparent 50%),
radial-gradient(ellipse 10px 18px at 92% 0%, var(--pg-mint) 50%, transparent 50%);
pointer-events: none;
}
.pg-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(200, 162, 200, 0.12);
color: var(--pg-lavender);
padding: 6px 14px;
border-radius: 50px;
font-family: 'Quicksand', sans-serif;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.04em;
border: 1px solid rgba(200, 162, 200, 0.2);
}
.pg-badge--pink {
background: rgba(249, 168, 212, 0.12);
color: var(--pg-pink);
border-color: rgba(249, 168, 212, 0.2);
}
.pg-badge--mint {
background: rgba(167, 243, 208, 0.12);
color: var(--pg-mint);
border-color: rgba(167, 243, 208, 0.2);
}
/* Sticker variant with slight rotation and dashed border */
.pg-badge--sticker {
transform: rotate(-3deg);
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
border: 2px dashed rgba(200, 162, 200, 0.3);
}
.pg-quote {
background: rgba(45, 45, 45, 0.6);
border: 2px solid rgba(200, 162, 200, 0.15);
border-radius: 20px;
padding: 36px 32px;
position: relative;
text-align: center;
}
/* Decorative opening quotation mark */
.pg-quote::before {
content: '\201C';
position: absolute;
top: 12px;
left: 20px;
font-size: 3rem;
color: var(--pg-lavender);
opacity: 0.4;
line-height: 1;
font-family: Georgia, serif;
}
.pg-quote blockquote {
font-family: 'Satisfy', cursive;
font-size: 1.3rem;
color: var(--pg-pink);
line-height: 1.6;
margin: 0 0 16px;
padding: 0;
border: none;
}
.pg-quote cite {
font-family: 'Quicksand', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--pg-lilac);
font-style: normal;
letter-spacing: 0.06em;
}
/* Skull icon before citation */
.pg-quote cite::before {
content: '\2620 ';
}
.pg-input {
width: 100%;
background: rgba(45, 45, 45, 0.6);
border: 2px solid rgba(200, 162, 200, 0.2);
border-radius: 50px;
padding: 14px 24px;
font-family: 'Quicksand', sans-serif;
font-size: 0.95rem;
color: var(--pg-white);
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.pg-input::placeholder {
color: rgba(200, 162, 200, 0.4);
}
.pg-input:focus {
border-color: var(--pg-pink);
box-shadow: var(--pg-glow-pink);
}
/* Textarea variant with reduced border-radius */
.pg-input--textarea {
border-radius: 16px;
resize: vertical;
min-height: 120px;
}
box-shadow and text-shadow on dark backgrounds for luminescencergba(200, 162, 200, 0.15)) rather than pure black| Aesthetic | Relationship to Pastel Goth |
|---|---|
| Cutecore | Shares the kawaii influence, rounded shapes, and playful iconography; Cutecore lacks the gothic darkness and macabre motifs entirely |
| Coquette | Overlaps in pastel pinks, bows, and feminine softness; Coquette is romantic and flirty where Pastel Goth is morbid and subcultural |
| Danish Pastel | Both use soft pastel palettes, but Danish Pastel is minimalist Scandinavian while Pastel Goth embraces maximalist gothic decoration |
| Dark Academia | Shares appreciation for dark, moody atmospheres; Dark Academia is intellectual and classical where Pastel Goth is playful and internet-native |
| Cyberpunk | Both use glowing elements on dark backgrounds; Cyberpunk is neon, angular, and dystopian while Pastel Goth is soft, rounded, and subcultural |
| Dreamcore | Overlaps in ethereal, surreal quality and pastel tones; Dreamcore leans into uncanny liminal spaces rather than gothic iconography |
| Whimsigothic | Shares occult and mystical symbols; Whimsigothic leans more toward witchcraft, celestial themes, and warmer jewel tones |
| Goblincore | Both subvert conventional beauty and embrace the macabre; Goblincore is earthy and natural while Pastel Goth is sugary and digital |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pastel Goth Page</title>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Quicksand:wght@400;500;600&family=UnifrakturCook:wght@700&family=Satisfy&display=swap" rel="stylesheet">
<style>
:root {
--pg-bg-void: #1a1a1a;
--pg-bg-coffin: #2d2d2d;
--pg-bg-tombstone: #4a4a4a;
--pg-lilac: #c8a2c8;
--pg-lavender: #d8b4fe;
--pg-orchid: #e9d5ff;
--pg-bat-wing: #6b21a8;
--pg-pink: #f9a8d4;
--pg-baby-pink: #fbbdd9;
--pg-blush: #fde7f0;
--pg-mint: #a7f3d0;
--pg-witch-water: #99f6e4;
--pg-potion-blue: #bae6fd;
--pg-white: #f5f0f6;
--pg-moon: #fef3c7;
--pg-glow-lilac: 0 0 12px rgba(200, 162, 200, 0.5), 0 0 40px rgba(200, 162, 200, 0.15);
--pg-glow-pink: 0 0 12px rgba(249, 168, 212, 0.5), 0 0 40px rgba(249, 168, 212, 0.15);
--pg-glow-mint: 0 0 12px rgba(167, 243, 208, 0.5), 0 0 40px rgba(167, 243, 208, 0.15);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--pg-bg-void);
color: var(--pg-white);
font-family: 'Quicksand', sans-serif;
font-size: 1rem;
line-height: 1.7;
}
h1, h2, h3 {
font-family: 'Comfortaa', sans-serif;
font-weight: 700;
line-height: 1.3;
}
/* -- Navigation -- */
nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 16px 32px;
border-bottom: 2px solid rgba(200, 162, 200, 0.12);
}
nav a.logo {
font-family: 'UnifrakturCook', cursive;
font-weight: 700;
font-size: 1.5rem;
color: var(--pg-lavender);
text-decoration: none;
text-shadow: 0 0 10px rgba(216, 180, 254, 0.4);
}
nav ul {
display: flex;
gap: 6px;
list-style: none;
}
nav ul a {
font-family: 'Quicksand', sans-serif;
font-weight: 600;
color: var(--pg-white);
text-decoration: none;
font-size: 0.85rem;
padding: 8px 18px;
border-radius: 50px;
transition: all 0.2s ease;
}
nav ul a:hover {
background: rgba(249, 168, 212, 0.12);
color: var(--pg-pink);
}
/* -- Hero Section -- */
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 85vh;
padding: 80px 32px;
overflow: hidden;
}
/* Gradient orb glow */
.hero::before {
content: '';
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(200, 162, 200, 0.12) 0%, rgba(249, 168, 212, 0.06) 40%, transparent 70%);
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
}
/* Starfield sparkles */
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(1.5px 1.5px at 10% 20%, rgba(216, 180, 254, 0.3) 0%, transparent 100%),
radial-gradient(1px 1px at 30% 70%, rgba(249, 168, 212, 0.25) 0%, transparent 100%),
radial-gradient(1px 1px at 55% 10%, rgba(167, 243, 208, 0.25) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 80% 60%, rgba(216, 180, 254, 0.3) 0%, transparent 100%),
radial-gradient(1px 1px at 90% 30%, rgba(249, 168, 212, 0.2) 0%, transparent 100%),
radial-gradient(1px 1px at 20% 90%, rgba(167, 243, 208, 0.2) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 650px;
}
.hero-motif {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.hero h1 {
font-size: clamp(2.2rem, 5.5vw, 4rem);
color: var(--pg-lavender);
text-shadow: 0 0 25px rgba(216, 180, 254, 0.4), 0 0 70px rgba(216, 180, 254, 0.1);
margin-bottom: 1rem;
}
.hero .subtitle {
font-family: 'Satisfy', cursive;
font-size: 1.4rem;
color: var(--pg-pink);
margin-bottom: 1rem;
}
.hero p {
color: rgba(245, 240, 246, 0.65);
font-size: 1.05rem;
margin-bottom: 2.5rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--pg-pink), var(--pg-lavender));
color: var(--pg-bg-void);
border: none;
border-radius: 50px;
padding: 14px 36px;
font-family: 'Comfortaa', sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(249, 168, 212, 0.3);
}
.btn:hover {
box-shadow: 0 0 12px rgba(249, 168, 212, 0.5), 0 0 40px rgba(249, 168, 212, 0.15);
transform: translateY(-2px);
}
.btn--ghost {
background: transparent;
color: var(--pg-pink);
border: 2px solid var(--pg-pink);
box-shadow: none;
margin-left: 12px;
}
.btn--ghost:hover {
background: rgba(249, 168, 212, 0.1);
box-shadow: 0 0 12px rgba(249, 168, 212, 0.3);
}
/* -- Drip Divider -- */
.drip {
position: relative;
height: 40px;
overflow: hidden;
}
.drip::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--pg-lavender), var(--pg-pink), var(--pg-mint), var(--pg-lavender));
}
.drip::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background:
radial-gradient(ellipse 10px 18px at 8% 0%, var(--pg-lavender) 50%, transparent 50%),
radial-gradient(ellipse 6px 26px at 22% 0%, var(--pg-pink) 50%, transparent 50%),
radial-gradient(ellipse 8px 14px at 40% 0%, var(--pg-mint) 50%, transparent 50%),
radial-gradient(ellipse 12px 22px at 58% 0%, var(--pg-lavender) 50%, transparent 50%),
radial-gradient(ellipse 6px 30px at 74% 0%, var(--pg-pink) 50%, transparent 50%),
radial-gradient(ellipse 8px 16px at 90% 0%, var(--pg-mint) 50%, transparent 50%);
pointer-events: none;
}
/* -- Features Section -- */
.features {
padding: 60px 32px 80px;
max-width: 1200px;
margin: 0 auto;
}
.features h2 {
text-align: center;
font-size: 1.8rem;
color: var(--pg-pink);
margin-bottom: 8px;
}
.features .section-sub {
text-align: center;
font-family: 'Satisfy', cursive;
color: var(--pg-lilac);
font-size: 1.1rem;
margin-bottom: 48px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.feature {
background: rgba(45, 45, 45, 0.7);
border: 2px solid rgba(200, 162, 200, 0.15);
border-radius: 16px;
padding: 28px;
position: relative;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.feature:hover {
border-color: rgba(249, 168, 212, 0.4);
box-shadow: var(--pg-glow-pink);
transform: translateY(-3px);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 12px;
display: block;
}
.feature-badge {
display: inline-block;
background: rgba(200, 162, 200, 0.12);
color: var(--pg-lavender);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 12px;
border: 1px solid rgba(200, 162, 200, 0.2);
}
.feature h3 {
font-size: 1.15rem;
color: var(--pg-lavender);
margin-bottom: 8px;
}
.feature p {
color: rgba(245, 240, 246, 0.6);
font-size: 0.9rem;
line-height: 1.6;
}
/* -- Testimonial Section -- */
.testimonial {
padding: 60px 32px 80px;
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.testimonial-card {
background: rgba(45, 45, 45, 0.5);
border: 2px solid rgba(200, 162, 200, 0.12);
border-radius: 20px;
padding: 40px 36px;
position: relative;
}
.testimonial-card::before {
content: '\201C';
position: absolute;
top: 12px;
left: 24px;
font-size: 3.5rem;
color: var(--pg-lavender);
opacity: 0.3;
line-height: 1;
font-family: Georgia, serif;
}
.testimonial-card blockquote {
font-family: 'Satisfy', cursive;
font-size: 1.3rem;
color: var(--pg-pink);
line-height: 1.7;
margin-bottom: 20px;
}
.testimonial-card cite {
font-family: 'Quicksand', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--pg-lilac);
font-style: normal;
}
.testimonial-card cite::before {
content: '\2620 ';
}
/* -- CTA / Newsletter Section -- */
.cta {
text-align: center;
padding: 60px 32px 80px;
max-width: 600px;
margin: 0 auto;
}
.cta h2 {
font-size: 1.8rem;
color: var(--pg-mint);
text-shadow: 0 0 15px rgba(167, 243, 208, 0.3);
margin-bottom: 8px;
}
.cta p {
color: rgba(245, 240, 246, 0.6);
margin-bottom: 2rem;
}
.cta-form {
display: flex;
gap: 12px;
max-width: 460px;
margin: 0 auto;
}
.cta-form input {
flex: 1;
background: rgba(45, 45, 45, 0.6);
border: 2px solid rgba(200, 162, 200, 0.2);
border-radius: 50px;
padding: 14px 24px;
font-family: 'Quicksand', sans-serif;
font-size: 0.9rem;
color: var(--pg-white);
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.cta-form input::placeholder {
color: rgba(200, 162, 200, 0.35);
}
.cta-form input:focus {
border-color: var(--pg-pink);
box-shadow: var(--pg-glow-pink);
}
.cta-form .btn { white-space: nowrap; }
/* -- Footer -- */
footer {
border-top: 2px solid rgba(200, 162, 200, 0.1);
text-align: center;
padding: 32px;
}
footer .footer-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 16px;
font-size: 1.2rem;
}
footer .footer-icons a {
color: var(--pg-lilac);
text-decoration: none;
transition: color 0.2s, text-shadow 0.2s;
}
footer .footer-icons a:hover {
color: var(--pg-pink);
text-shadow: 0 0 8px rgba(249, 168, 212, 0.4);
}
footer .gothic-text {
font-family: 'UnifrakturCook', cursive;
color: var(--pg-lilac);
font-size: 1rem;
margin-bottom: 4px;
}
footer p {
color: rgba(245, 240, 246, 0.4);
font-size: 0.8rem;
}
/* -- Responsive -- */
@media (max-width: 768px) {
nav { padding: 12px 20px; }
nav ul { gap: 4px; }
nav ul a { padding: 6px 12px; font-size: 0.8rem; }
.hero { min-height: auto; padding: 60px 20px; }
.features { padding: 40px 20px 60px; }
.testimonial { padding: 40px 20px 60px; }
.cta { padding: 40px 20px 60px; }
.cta-form { flex-direction: column; }
.btn--ghost { margin-left: 0; margin-top: 8px; }
}
</style>
</head>
<body>
<nav>
<a href="#" class="logo">Nocturne</a>
<ul>
<li><a href="#">Shop</a></li>
<li><a href="#">Lookbook</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="hero">
<div class="hero-content">
<span class="hero-motif">☠</span>
<h1>Soft Darkness, Sweet Decay</h1>
<p class="subtitle">where sugar skulls meet lavender dreams</p>
<p>Handcrafted accessories where kawaii meets the crypt. Enamel pins, chokers, and charms for the pastel-hearted creature of the night.</p>
<div>
<a href="#" class="btn">Browse Collection</a>
<a href="#" class="btn btn--ghost">Our Story</a>
</div>
</div>
</section>
<div class="drip"></div>
<section class="features">
<h2>New Arrivals</h2>
<p class="section-sub">freshly risen from the grave</p>
<div class="features-grid">
<div class="feature">
<span class="feature-icon">💀</span>
<span class="feature-badge">Limited Edition</span>
<h3>Sugar Skull Pin Set</h3>
<p>A collection of five enamel pins featuring candy-colored skulls adorned with flower crowns, bows, and tiny bat wings. Soft enamel on black nickel.</p>
</div>
<div class="feature">
<span class="feature-icon">🌘</span>
<span class="feature-badge">Bestseller</span>
<h3>Crescent Moon Choker</h3>
<p>Lavender velvet choker with a dangling crescent moon pendant in iridescent finish. Adjustable chain with a tiny coffin clasp detail.</p>
</div>
<div class="feature">
<span class="feature-icon">🖤</span>
<span class="feature-badge">Pre-Order</span>
<h3>Bat Wing Earrings</h3>
<p>Translucent resin bat wings in gradient pink-to-purple with embedded glitter. Hypoallergenic surgical steel hooks for sensitive ears.</p>
</div>
</div>
</section>
<div class="drip"></div>
<section class="testimonial">
<div class="testimonial-card">
<blockquote>I wear the skull pin set every single day. People always stop me to ask where I got them. The quality is absolutely beautiful and perfectly creepy-cute.</blockquote>
<cite>Lilith M. -- Verified Customer</cite>
</div>
</section>
<div class="drip"></div>
<section class="cta">
<h2>Join the Coven</h2>
<p>Subscribe to our newsletter for early access to new drops, exclusive discount spells, and behind-the-scenes peeks into our haunted workshop.</p>
<div class="cta-form">
<input type="email" placeholder="your@email.hex">
<a href="#" class="btn">Subscribe</a>
</div>
</section>
<footer>
<div class="footer-icons">
<a href="#">☠</a>
<a href="#">🖤</a>
<a href="#">🌘</a>
<a href="#">✝</a>
</div>
<p class="gothic-text">Nocturne</p>
<p>Handcrafted with love and a little darkness · Est. 2019</p>
</footer>
</body>
</html>