Ethereal is a dreamy, soft, and otherworldly design aesthetic built on light diffusion, pastel hazes, blurred edges, and luminous glow. It draws its visual language from the transient beauty of mist rolling over still water, sunlight filtered through gauze, and the liminal glow of early dawn or late dusk. Where most design systems seek crispness and definition, Ethereal deliberately dissolves boundaries – softening edges, lowering contrast, and layering translucent washes of color so that every element appears to float in a state of gentle suspension. The result is an interface that feels less like a screen and more like a window into a quiet, luminous elsewhere.
The aesthetic traces roots through romantic fine art, fashion editorials, and the visual culture of angelic and celestial imagery. In web and digital design, it gained traction alongside the broader trend toward softer, more human interfaces – a counter-movement to the sharp geometries of flat design and the high-contrast drama of dark-mode interfaces. Ethereal occupies the same emotional territory as Dreamcore and Danish Pastel, but distinguishes itself through its commitment to radiance: every surface glows, every color breathes, and every typographic choice whispers rather than shouts.
Key emotional registers include serenity, wonder, delicacy, and transcendence. Ethereal design is ideal for wellness brands, beauty and skincare, poetry and literary platforms, meditation apps, wedding and event sites, fine-art portfolios, and any digital experience where the goal is to slow the viewer down and invite contemplation rather than conversion-driven urgency. The palette centers on lavender, blush, powder blue, soft mint, pearl, and champagne – colors that appear to emit their own quiet light. Typography leans thin, serif-accented, and generously spaced, reinforcing the sense that content floats within an atmosphere of gentle luminescence rather than sitting on a rigid scaffold.
The Ethereal palette is anchored in the palest reaches of the color spectrum. Every hue is pushed toward white, as if seen through layers of sheer fabric or soft morning fog. Accent colors remain muted and luminous; even the deepest tones in the system read as gentle rather than heavy. The goal is a palette that appears to glow from within – colors that emit light rather than absorb it.
| Swatch | Hex | Role / Usage |
|---|---|---|
| Pearl White | #FAF8FF |
Primary background, the luminous void |
| Morning Mist | #F0ECF5 |
Secondary background, card surfaces |
| Lavender Haze | #DDD3EC |
Decorative washes, soft overlays |
| Wisteria | #C4B1DC |
Primary accent, interactive focus rings |
| Soft Lilac | #B59AD8 |
Buttons, links, primary interactive color |
| Blush Cloud | #F2DAE0 |
Warm accent, notification badges, highlights |
| Rose Quartz | #E8C1CA |
Secondary warm accent, hover states |
| Powder Blue | #D4E4F7 |
Cool accent, info states, tag backgrounds |
| Sky Veil | #BDD5F0 |
Secondary cool accent, progress indicators |
| Seafoam Whisper | #D5EDE6 |
Success states, positive indicators |
| Champagne Glow | #F5EDD6 |
Warning states, warm highlights |
| Opal | #E6E0F3 |
Tertiary surfaces, divider fills |
| Moonstone | #8A7CA8 |
Primary text on light backgrounds |
| Dusk Violet | #5E4F78 |
Headings, high-emphasis text |
| Mist Shadow | #9B93A8 |
Secondary text, captions, placeholders |
:root {
/* Backgrounds */
--eth-pearl: #FAF8FF;
--eth-mist: #F0ECF5;
--eth-opal: #E6E0F3;
/* Purple / Lavender spectrum */
--eth-lavender-haze: #DDD3EC;
--eth-wisteria: #C4B1DC;
--eth-soft-lilac: #B59AD8;
/* Warm accents */
--eth-blush-cloud: #F2DAE0;
--eth-rose-quartz: #E8C1CA;
--eth-champagne: #F5EDD6;
/* Cool accents */
--eth-powder-blue: #D4E4F7;
--eth-sky-veil: #BDD5F0;
--eth-seafoam: #D5EDE6;
/* Text */
--eth-text-primary: #5E4F78;
--eth-text-body: #8A7CA8;
--eth-text-muted: #9B93A8;
/* Signature gradients */
--eth-gradient-haze: linear-gradient(135deg, #F0ECF5, #DDD3EC, #D4E4F7);
--eth-gradient-blush: linear-gradient(135deg, #F2DAE0, #DDD3EC, #E6E0F3);
--eth-gradient-dawn: linear-gradient(180deg, #FAF8FF, #F0ECF5, #DDD3EC);
--eth-gradient-iridescent: linear-gradient(135deg, #D4E4F7, #DDD3EC, #F2DAE0, #D5EDE6);
/* Glow */
--eth-glow-soft: 0 0 40px rgba(181, 154, 216, 0.15);
--eth-glow-warm: 0 0 40px rgba(242, 218, 224, 0.2);
--eth-glow-cool: 0 0 40px rgba(212, 228, 247, 0.2);
/* Glass */
--eth-glass-bg: rgba(255, 255, 255, 0.45);
--eth-glass-border: rgba(181, 154, 216, 0.15);
--eth-glass-blur: 20px;
}
Ethereal typography is thin, airy, and generously spaced. The type system favors light-to-regular weight fonts with high x-heights and open letterforms that allow the luminous background to breathe through the text. Headings often use elegant serifs or thin geometric sans-serifs to evoke a sense of quiet refinement. Script accents, used sparingly, add a whisper of romantic calligraphy. Every typographic choice should feel like words spoken softly in a sunlit room.
| Font | Weight(s) | Style | Best For | Link |
|---|---|---|---|---|
| Cormorant Garamond | 300, 400, 500 | Elegant serif | Display headings, hero text | Cormorant Garamond |
| Raleway | 200, 300, 400 | Geometric thin sans | Subheadings, labels, navigation | Raleway |
| Josefin Sans | 200, 300, 400 | Geometric, airy | Headlines, elegant modern headings | Josefin Sans |
| Nunito | 300, 400, 500 | Rounded sans | Body text, readable and soft | Nunito |
| Lora | 400, 500 | Calligraphic serif | Body text, editorial content | Lora |
| Prata | 400 | High-contrast Didone | Display titles, pull quotes | Prata |
| La Belle Aurore | 400 | Handwritten script | Decorative accents, signatures | La Belle Aurore |
| Heading Font | Body Font | Character |
|---|---|---|
| Cormorant Garamond (300) | Nunito (300) | Classical elegance meets soft warmth |
| Josefin Sans (200) | Lora (400) | Airy geometry paired with calligraphic grace |
| Prata (400) | Raleway (300) | High-contrast drama with delicate lightness |
| Cormorant Garamond (400) | Raleway (300) | Traditional refinement, modern airiness |
| Josefin Sans (300) | Nunito (400) | Clean, luminous, and deeply approachable |
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Nunito:wght@300;400;500&family=La+Belle+Aurore&display=swap');
body {
font-family: 'Nunito', 'Segoe UI', sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.85;
color: var(--eth-text-body);
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-weight: 300;
color: var(--eth-text-primary);
line-height: 1.25;
letter-spacing: 0.02em;
}
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}
.eth-display {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(3rem, 7vw, 5.5rem);
letter-spacing: 0.04em;
line-height: 1.1;
color: var(--eth-text-primary);
}
.eth-script {
font-family: 'La Belle Aurore', cursive;
font-size: 1.4rem;
color: var(--eth-wisteria);
letter-spacing: 0.02em;
}
.eth-label {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--eth-text-muted);
}
.eth-card {
background: var(--eth-glass-bg);
backdrop-filter: blur(var(--eth-glass-blur));
-webkit-backdrop-filter: blur(var(--eth-glass-blur));
border: 1px solid var(--eth-glass-border);
border-radius: 24px;
padding: 40px;
box-shadow: var(--eth-glow-soft);
transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.eth-card:hover {
box-shadow:
0 0 60px rgba(181, 154, 216, 0.2),
0 8px 32px rgba(181, 154, 216, 0.08);
transform: translateY(-4px);
}
.eth-card h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.4rem;
color: var(--eth-text-primary);
margin-bottom: 12px;
}
.eth-card p {
font-size: 0.95rem;
color: var(--eth-text-muted);
line-height: 1.75;
}
.eth-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--eth-gradient-blush);
color: var(--eth-text-primary);
border: none;
border-radius: 50px;
padding: 14px 40px;
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.06em;
cursor: pointer;
text-decoration: none;
box-shadow: var(--eth-glow-warm);
transition: box-shadow 0.5s ease, transform 0.4s ease;
}
.eth-button:hover {
box-shadow:
0 0 50px rgba(232, 193, 202, 0.3),
0 4px 20px rgba(181, 154, 216, 0.15);
transform: translateY(-2px);
}
.eth-button--ghost {
background: transparent;
border: 1px solid var(--eth-glass-border);
box-shadow: none;
color: var(--eth-text-body);
}
.eth-button--ghost:hover {
background: rgba(255, 255, 255, 0.4);
box-shadow: var(--eth-glow-soft);
border-color: var(--eth-wisteria);
}
.eth-nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 24px 40px;
position: relative;
z-index: 10;
}
.eth-nav__logo {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.5rem;
color: var(--eth-text-primary);
text-decoration: none;
letter-spacing: 0.06em;
}
.eth-nav__links {
display: flex;
gap: 36px;
list-style: none;
margin: 0;
padding: 0;
}
.eth-nav__links a {
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 0.88rem;
letter-spacing: 0.05em;
color: var(--eth-text-muted);
text-decoration: none;
transition: color 0.4s ease;
}
.eth-nav__links a:hover {
color: var(--eth-text-primary);
}
.eth-hero {
min-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 100px 40px;
position: relative;
overflow: hidden;
}
.eth-hero::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse, rgba(212, 228, 247, 0.4) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
animation: ethFloat 12s ease-in-out infinite alternate;
}
.eth-hero::after {
content: '';
position: absolute;
bottom: -15%;
right: -10%;
width: 50%;
height: 50%;
background: radial-gradient(ellipse, rgba(242, 218, 224, 0.35) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
animation: ethFloat 15s ease-in-out infinite alternate-reverse;
}
@keyframes ethFloat {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, -20px) scale(1.05); }
}
.eth-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.8rem, 6vw, 5rem);
color: var(--eth-text-primary);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
letter-spacing: 0.03em;
}
.eth-hero p {
font-size: 1.15rem;
color: var(--eth-text-muted);
max-width: 560px;
margin: 0 auto 2.5rem;
line-height: 1.9;
position: relative;
z-index: 1;
}
.eth-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: 0.5;
}
.eth-orb--lavender {
width: 400px;
height: 400px;
background: var(--eth-lavender-haze);
animation: ethOrb 18s ease-in-out infinite alternate;
}
.eth-orb--blush {
width: 350px;
height: 350px;
background: var(--eth-blush-cloud);
animation: ethOrb 22s ease-in-out infinite alternate-reverse;
}
.eth-orb--blue {
width: 300px;
height: 300px;
background: var(--eth-powder-blue);
animation: ethOrb 15s ease-in-out infinite alternate;
}
@keyframes ethOrb {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.08); }
66% { transform: translate(-15px, 15px) scale(0.95); }
100% { transform: translate(10px, -10px) scale(1.03); }
}
.eth-divider {
width: 120px;
height: 2px;
margin: 60px auto;
background: var(--eth-gradient-iridescent);
border: none;
border-radius: 2px;
opacity: 0.5;
}
.eth-shimmer {
background: var(--eth-gradient-iridescent);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: ethShimmer 8s ease-in-out infinite;
}
@keyframes ethShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.eth-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.2s ease, transform 1.2s ease;
}
.eth-fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
| Aesthetic | Relationship to Ethereal |
|---|---|
| Dreamcore | Shares the misty, floating quality but Dreamcore leans uncanny and unsettling where Ethereal remains serene and beautiful |
| Danish Pastel | Both use soft pastel palettes; Danish Pastel is warmer, more playful, and interior-design-focused |
| Glassmorphism | Core technique overlap: frosted glass and blur effects; Glassmorphism is a UI pattern while Ethereal is a complete emotional system |
| Aurora Gradient | Shares luminous glow and soft gradients; Aurora works against dark backgrounds with vivid spectrum, Ethereal stays pale and light |
| Cottagecore | Both evoke gentle beauty and nostalgia; Cottagecore is earthy and rustic while Ethereal is celestial and weightless |
| Coquette | Overlapping use of blush pink, ribbons, and femininity; Coquette is more deliberately ornamental and playful |
| Frosted Touch | Shares translucent layering and blur; Frosted Touch emphasizes the glass material itself, Ethereal uses it as atmosphere |
| Frutiger Aero | Both feel luminous and optimistic; Frutiger Aero is glossy, dimensional, and nature-tech-fused where Ethereal is flat, muted, and transcendent |
| Light Skeuomorphism | Shares light backgrounds and subtle depth cues; Light Skeuo is more structured, with realistic material references |
| Art Nouveau | Both celebrate organic curves and natural beauty; Art Nouveau is ornamental and linear while Ethereal dissolves form into atmosphere |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ethereal -- Dreamy Design</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Nunito:wght@300;400;500&family=La+Belle+Aurore&display=swap" rel="stylesheet">
<style>
:root {
/* Backgrounds */
--eth-pearl: #FAF8FF;
--eth-mist: #F0ECF5;
--eth-opal: #E6E0F3;
/* Purple / Lavender spectrum */
--eth-lavender-haze: #DDD3EC;
--eth-wisteria: #C4B1DC;
--eth-soft-lilac: #B59AD8;
/* Warm accents */
--eth-blush-cloud: #F2DAE0;
--eth-rose-quartz: #E8C1CA;
--eth-champagne: #F5EDD6;
/* Cool accents */
--eth-powder-blue: #D4E4F7;
--eth-sky-veil: #BDD5F0;
--eth-seafoam: #D5EDE6;
/* Text */
--eth-text-primary: #5E4F78;
--eth-text-body: #8A7CA8;
--eth-text-muted: #9B93A8;
/* Gradients */
--eth-gradient-haze: linear-gradient(135deg, #F0ECF5, #DDD3EC, #D4E4F7);
--eth-gradient-blush: linear-gradient(135deg, #F2DAE0, #DDD3EC, #E6E0F3);
--eth-gradient-dawn: linear-gradient(180deg, #FAF8FF, #F0ECF5, #DDD3EC);
--eth-gradient-iridescent: linear-gradient(135deg, #D4E4F7, #DDD3EC, #F2DAE0, #D5EDE6);
/* Glow */
--eth-glow-soft: 0 0 40px rgba(181, 154, 216, 0.15);
--eth-glow-warm: 0 0 40px rgba(242, 218, 224, 0.2);
/* Glass */
--eth-glass-bg: rgba(255, 255, 255, 0.45);
--eth-glass-border: rgba(181, 154, 216, 0.15);
--eth-glass-blur: 20px;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Nunito', 'Segoe UI', sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.85;
color: var(--eth-text-body);
background: var(--eth-pearl);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-weight: 300;
color: var(--eth-text-primary);
line-height: 1.25;
letter-spacing: 0.02em;
}
/* =============================================
AMBIENT BACKGROUND ORBS
============================================= */
.orb {
position: fixed;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
opacity: 0.45;
}
.orb--1 {
width: 500px;
height: 500px;
background: var(--eth-lavender-haze);
top: -10%;
left: -5%;
animation: orbFloat 18s ease-in-out infinite alternate;
}
.orb--2 {
width: 400px;
height: 400px;
background: var(--eth-blush-cloud);
top: 30%;
right: -8%;
animation: orbFloat 22s ease-in-out infinite alternate-reverse;
}
.orb--3 {
width: 350px;
height: 350px;
background: var(--eth-powder-blue);
bottom: -5%;
left: 20%;
animation: orbFloat 15s ease-in-out infinite alternate;
}
.orb--4 {
width: 300px;
height: 300px;
background: var(--eth-seafoam);
top: 60%;
left: -10%;
animation: orbFloat 20s ease-in-out infinite alternate-reverse;
}
@keyframes orbFloat {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(25px, -30px) scale(1.06); }
66% { transform: translate(-20px, 15px) scale(0.94); }
100% { transform: translate(10px, -10px) scale(1.02); }
}
/* All content above orbs */
.page-content {
position: relative;
z-index: 1;
}
/* =============================================
NAVIGATION
============================================= */
nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 28px 40px;
}
.logo {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.5rem;
color: var(--eth-text-primary);
text-decoration: none;
letter-spacing: 0.08em;
}
nav ul {
display: flex;
gap: 36px;
list-style: none;
}
nav ul a {
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 0.88rem;
letter-spacing: 0.04em;
color: var(--eth-text-muted);
text-decoration: none;
transition: color 0.4s ease;
}
nav ul a:hover {
color: var(--eth-text-primary);
}
/* =============================================
HERO SECTION
============================================= */
.hero {
min-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 40px;
position: relative;
}
.hero h1 {
font-size: clamp(2.8rem, 6vw, 5rem);
letter-spacing: 0.03em;
margin-bottom: 1.5rem;
}
.hero .script-accent {
font-family: 'La Belle Aurore', cursive;
font-size: 1.3rem;
color: var(--eth-wisteria);
margin-bottom: 1rem;
display: block;
}
.hero p {
font-size: 1.15rem;
color: var(--eth-text-muted);
max-width: 540px;
margin: 0 auto 2.5rem;
line-height: 1.9;
}
/* =============================================
BUTTONS
============================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--eth-gradient-blush);
color: var(--eth-text-primary);
border: none;
border-radius: 50px;
padding: 14px 40px;
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.06em;
cursor: pointer;
text-decoration: none;
box-shadow: var(--eth-glow-warm);
transition: box-shadow 0.5s ease, transform 0.4s ease;
}
.btn:hover {
box-shadow:
0 0 50px rgba(232, 193, 202, 0.3),
0 4px 20px rgba(181, 154, 216, 0.15);
transform: translateY(-2px);
}
.btn--ghost {
background: transparent;
border: 1px solid var(--eth-glass-border);
box-shadow: none;
color: var(--eth-text-body);
}
.btn--ghost:hover {
background: rgba(255, 255, 255, 0.4);
box-shadow: var(--eth-glow-soft);
border-color: var(--eth-wisteria);
}
/* =============================================
DIVIDER
============================================= */
.divider {
width: 120px;
height: 2px;
margin: 80px auto;
background: var(--eth-gradient-iridescent);
border: none;
border-radius: 2px;
opacity: 0.5;
}
/* =============================================
FEATURES SECTION
============================================= */
.features {
max-width: 1100px;
margin: 0 auto;
padding: 40px 40px 100px;
}
.features h2 {
text-align: center;
font-size: clamp(2rem, 4vw, 2.8rem);
margin-bottom: 16px;
}
.features > p {
text-align: center;
color: var(--eth-text-muted);
max-width: 520px;
margin: 0 auto 60px;
font-size: 1rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.card {
background: var(--eth-glass-bg);
backdrop-filter: blur(var(--eth-glass-blur));
-webkit-backdrop-filter: blur(var(--eth-glass-blur));
border: 1px solid var(--eth-glass-border);
border-radius: 24px;
padding: 40px;
box-shadow: var(--eth-glow-soft);
transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.card:hover {
box-shadow:
0 0 60px rgba(181, 154, 216, 0.2),
0 8px 32px rgba(181, 154, 216, 0.08);
transform: translateY(-4px);
}
.card-icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.card h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.35rem;
margin-bottom: 10px;
}
.card p {
font-size: 0.93rem;
color: var(--eth-text-muted);
line-height: 1.75;
}
/* =============================================
QUOTE / TESTIMONIAL
============================================= */
.quote-section {
max-width: 700px;
margin: 0 auto;
padding: 40px 40px 100px;
text-align: center;
}
.quote-section blockquote {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.4rem, 3vw, 2rem);
font-style: italic;
color: var(--eth-text-primary);
line-height: 1.6;
margin-bottom: 24px;
position: relative;
}
.quote-section blockquote::before {
content: '\201C';
font-size: 4rem;
color: var(--eth-lavender-haze);
position: absolute;
top: -20px;
left: -10px;
line-height: 1;
}
.quote-section cite {
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 0.85rem;
color: var(--eth-text-muted);
font-style: normal;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* =============================================
CTA SECTION
============================================= */
.cta {
text-align: center;
padding: 60px 40px 120px;
}
.cta-inner {
background: var(--eth-glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--eth-glass-border);
border-radius: 32px;
padding: 70px 50px;
max-width: 720px;
margin: 0 auto;
box-shadow: var(--eth-glow-soft);
}
.cta h2 {
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
margin-bottom: 16px;
}
.cta p {
color: var(--eth-text-muted);
margin-bottom: 2rem;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.cta .btn-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* =============================================
FOOTER
============================================= */
footer {
text-align: center;
padding: 40px;
font-size: 0.82rem;
color: var(--eth-text-muted);
letter-spacing: 0.03em;
}
footer a {
color: var(--eth-wisteria);
text-decoration: none;
}
/* =============================================
FADE-IN ANIMATION
============================================= */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.2s ease, transform 1.2s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 768px) {
nav { padding: 20px 24px; }
nav ul { gap: 20px; }
.hero { min-height: 70vh; padding: 60px 24px; }
.features { padding: 20px 24px 80px; }
.card { padding: 30px; }
.cta-inner { padding: 50px 28px; }
.quote-section { padding: 20px 24px 80px; }
.orb { opacity: 0.3; filter: blur(60px); }
}
@media (max-width: 480px) {
nav ul { gap: 14px; }
nav ul a { font-size: 0.8rem; }
.hero h1 { font-size: 2.2rem; }
.features-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- Ambient glow orbs -->
<div class="orb orb--1"></div>
<div class="orb orb--2"></div>
<div class="orb orb--3"></div>
<div class="orb orb--4"></div>
<div class="page-content">
<!-- Navigation -->
<nav>
<a href="#" class="logo">Ethereal</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Hero -->
<section class="hero">
<span class="script-accent">a place of gentle light</span>
<h1>Where softness<br>becomes clarity</h1>
<p>An experience designed for stillness. Every surface glows, every edge dissolves, every moment invites you to breathe.</p>
<div style="display:flex; gap:16px; flex-wrap:wrap; justify-content:center;">
<a href="#" class="btn">Enter the light</a>
<a href="#" class="btn btn--ghost">Learn more</a>
</div>
</section>
<hr class="divider">
<!-- Features -->
<section class="features">
<h2>Luminous by nature</h2>
<p>Three principles that guide every surface, every glow, every whispered detail.</p>
<div class="features-grid">
<div class="card fade-in">
<div class="card-icon" style="background: rgba(181,154,216,0.15);">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="5" stroke="#B59AD8" stroke-width="1.5"/>
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="#B59AD8" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<h3>Radiant Glow</h3>
<p>Every element emits a gentle luminescence. Soft halos and ambient light replace hard shadows, creating depth through radiance rather than darkness.</p>
</div>
<div class="card fade-in">
<div class="card-icon" style="background: rgba(212,228,247,0.2);">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#BDD5F0" stroke-width="1.5"/>
<path d="M8 12s1.5 3 4 3 4-3 4-3-1.5-3-4-3-4 3-4 3z" stroke="#BDD5F0" stroke-width="1.5"/>
</svg>
</div>
<h3>Dissolved Edges</h3>
<p>Boundaries blur and soften. Translucent glass, feathered gradients, and diffused imagery create an atmosphere where form melts into light.</p>
</div>
<div class="card fade-in">
<div class="card-icon" style="background: rgba(242,218,224,0.2);">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" stroke="#E8C1CA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3>Quiet Presence</h3>
<p>Space breathes. Generous whitespace is not emptiness but luminous atmosphere, holding each element in a gentle, floating suspension.</p>
</div>
</div>
</section>
<hr class="divider">
<!-- Quote -->
<section class="quote-section fade-in">
<blockquote>
The most beautiful things are not objects, not places -- they are moments of light, suspended between one breath and the next.
</blockquote>
<cite>On Impermanent Beauty</cite>
</section>
<hr class="divider">
<!-- CTA -->
<section class="cta">
<div class="cta-inner fade-in">
<h2>Step into the glow</h2>
<p>Join those who design with softness, intention, and light. Beauty begins at the threshold of stillness.</p>
<div class="btn-group">
<a href="#" class="btn">Begin</a>
<a href="#" class="btn btn--ghost">Explore further</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>Crafted with the Ethereal aesthetic. Softness is not weakness -- it is light, choosing to be gentle.</p>
</footer>
</div>
<!-- Scroll fade-in script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
},
{ threshold: 0.15 }
);
document.querySelectorAll('.fade-in').forEach((el) => observer.observe(el));
});
</script>
</body>
</html>
-webkit- prefixes for backdrop-filter and background-clip: text – Safari and older WebKit browsers require -webkit-backdrop-filter and -webkit-background-clip for the frosted glass and gradient text effects to renderfilter: blur() values on fixed-position orb elements are GPU-intensive; reduce orb opacity and blur radius on smaller viewports via media queries, or replace fixed orbs with a static CSS gradient on low-powered devices@supports fallbacks for backdrop-filter – on browsers without support, fall back to a solid semi-transparent background such as rgba(240, 236, 245, 0.85) to maintain the layered appearance without the frosted glass effect--eth-text-primary (#5E4F78) against --eth-pearl (#FAF8FF) for body text to clear AA standards (contrast ratio approximately 5.2:1), and avoid using --eth-text-muted for any essential contentwill-change: transform judiciouslyclamp() for responsive typography – the thin, light-weight display fonts that define Ethereal can become illegibly small on mobile; clamp() with generous minimums ensures headings remain readable without losing their airy proportionsease or ease-in-out timing; the Ethereal mood breaks instantly with any snappy or bouncy motion