Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
ClassiqueÉlégantOrnementalSombre
Vorschau

Romanticism Design Reference

Romanticism is a design aesthetic rooted in the great cultural and artistic movement that swept Europe from the late 18th to mid-19th century, rejecting Enlightenment rationalism in favor of intense emotion, the sublime power of nature, and the primacy of individual experience. Its visual language is drawn from the dramatic landscapes of Caspar David Friedrich, the luminous atmospheric canvases of J.M.W. Turner, and the surging color dynamism of Eugene Delacroix -- painters who used chiaroscuro, expressive brushwork, and vivid palettes to evoke feelings of awe, terror, longing, and transcendence. In web and UI design, Romanticism translates to dramatic hero imagery with stormy or golden-hour atmospheres, rich warm-cool color contrasts, painterly textures layered beneath content, emotional serif typography with sweeping italics, atmospheric lighting effects achieved through CSS gradients and overlays, and a pervasive sense of grandeur that treats every page as a stage for human feeling. The aesthetic favors depth over flatness, drama over minimalism, and the handmade over the mechanical -- creating digital experiences that feel like stepping into an oil painting hung in a candlelit gallery.

Visual Characteristics

Core Design Traits

  • Dramatic chiaroscuro contrast -- deep darks and luminous highlights create theatrical depth, mimicking the play of candlelight and storm-light across Romantic canvases; backgrounds shift from near-black to radiant gold
  • Painterly texture overlays -- subtle canvas grain, oil-paint brush strokes, craquelure, and parchment textures are layered at low opacity beneath content to evoke the tactile quality of 19th-century painting
  • Atmospheric gradient backgrounds -- multi-stop CSS gradients simulate the vast, moody skies of Friedrich and Turner, blending storm grays, dusky purples, molten golds, and deep crimsons
  • Rich warm-cool color tension -- fiery reds, burnt siennas, and amber golds contrast against cool slate blues, stormy grays, and midnight purples, creating the emotional push-pull central to Romantic art
  • Sweeping serif typography -- high-contrast transitional and Didone serifs with elegant italics, dramatic swash capitals, and generous scale create a sense of literary grandeur and emotional weight
  • Nature as primary imagery -- stormy seas, mountain peaks, ancient ruins overgrown with ivy, fog-shrouded forests, and dramatic sunsets serve as hero backgrounds and decorative motifs
  • Ornamental flourishes and frames -- classical borders, engraved-style ornaments, decorative rules, and gilded accents reference the elaborate picture frames and bookplates of the Romantic era
  • Vignette and atmospheric fade -- radial gradients darken edges toward the periphery, creating a cinematic vignette effect that focuses attention inward and adds depth
  • Emotional spatial drama -- oversized hero sections, full-bleed imagery, and generous vertical scale create a sense of vastness and awe that mirrors the Romantic concept of the sublime
  • Candlelit warmth and glow -- subtle box-shadows, text-shadows, and radial gradient highlights simulate the warm glow of fire and candlelight, adding intimacy to the grand scale

Design Principles

  • Emotion over information -- every design decision should amplify feeling; layout, color, and typography exist to move the viewer, not merely to organize content
  • Embrace the sublime -- scale, contrast, and atmospheric effects should evoke awe; the viewer should feel small before the grandeur of the design, as a wanderer before a mountain
  • Nature as collaborator -- natural imagery, organic forms, and the textures of earth, sky, and water should permeate the design, rejecting the sterile geometry of purely digital aesthetics
  • Light as narrative -- use gradients, overlays, and shadow to tell a story of light: golden dawn, storm-darkened afternoon, candlelit evening; light should have direction, warmth, and drama
  • Honor the handmade -- textures, ornaments, and typographic details should feel crafted by human hands rather than generated by algorithm; imperfection is beauty
  • Contrast as emotion -- warm against cool, light against dark, vast against intimate; the tension between opposites creates the emotional charge that defines Romanticism
  • Depth over flatness -- layered textures, shadows, atmospheric perspective, and overlapping elements create a sense of spatial depth that flat design deliberately rejects

Color Palette

The Romantic palette draws from the canvases of Friedrich, Turner, and Delacroix: earth tones and stormy neutrals form the foundation, while fiery accents and cool atmospheric tones create dramatic tension. Colors are rich but never garish -- always filtered through the haze of atmosphere and the patina of age.

Color Name Hex Role / Usage
Midnight Canvas #1A1118 Deepest background, immersive hero sections
Storm Charcoal #2C2433 Primary dark surface, card backgrounds, footer
Dusky Plum #3D2F47 Secondary dark surface, sidebar, overlay panels
Slate Tempest #4A5568 Muted text, secondary foreground, metadata
Fog Gray #8E8A93 Tertiary text, captions, disabled states
Parchment #F0E6D3 Primary text on dark, light card backgrounds
Antique Ivory #FAF4EA Maximum light, modal overlays, hero text
Molten Gold #C8943E Primary accent, links, call-to-action, ornamental highlights
Burnished Amber #D4A04A Hover states, warm glow accents, secondary CTA
Crimson Passion #8B2D3A Emotional emphasis, alert states, dramatic buttons
Vermillion Fire #C44B3F Active states, intense highlights, danger indicators
Turner Blue #3B5F8A Cool accent, links on light backgrounds, atmospheric tones
Friedrich Teal #2E6B6B Tertiary accent, success states, nature motifs
Dusk Rose #8A4F5E Soft accent, tags, decorative borders, romantic emphasis
Burnt Sienna #A0522D Warm accent, earthy highlights, image borders

CSS Custom Properties

:root {
  /* Dark Backgrounds */
  --rom-bg-deep: #1A1118;
  --rom-bg-primary: #2C2433;
  --rom-bg-secondary: #3D2F47;

  /* Light Surfaces */
  --rom-surface-parchment: #F0E6D3;
  --rom-surface-ivory: #FAF4EA;
  --rom-surface-warm: #E8DCCA;

  /* Text */
  --rom-text-light: #FAF4EA;
  --rom-text-parchment: #F0E6D3;
  --rom-text-muted: #8E8A93;
  --rom-text-dark: #2C2433;
  --rom-text-on-accent: #FAF4EA;

  /* Warm Accents */
  --rom-gold: #C8943E;
  --rom-gold-bright: #D4A04A;
  --rom-crimson: #8B2D3A;
  --rom-vermillion: #C44B3F;
  --rom-sienna: #A0522D;
  --rom-rose: #8A4F5E;

  /* Cool Accents */
  --rom-blue: #3B5F8A;
  --rom-teal: #2E6B6B;
  --rom-slate: #4A5568;
  --rom-fog: #8E8A93;

  /* Atmospheric Gradients */
  --rom-gradient-storm: linear-gradient(180deg, #1A1118 0%, #2C2433 40%, #3D2F47 100%);
  --rom-gradient-sunset: linear-gradient(135deg, #2C2433 0%, #5C2A35 40%, #C8943E 100%);
  --rom-gradient-golden: linear-gradient(180deg, #C8943E 0%, #D4A04A 50%, #F0E6D3 100%);
  --rom-gradient-tempest: linear-gradient(180deg, #3D2F47 0%, #3B5F8A 50%, #4A5568 100%);
  --rom-gradient-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(26, 17, 24, 0.6) 100%);

  /* Shadows & Glow */
  --rom-shadow-sm: 0 2px 8px rgba(26, 17, 24, 0.3);
  --rom-shadow-md: 0 4px 16px rgba(26, 17, 24, 0.4);
  --rom-shadow-lg: 0 8px 32px rgba(26, 17, 24, 0.5);
  --rom-shadow-gold: 0 0 20px rgba(200, 148, 62, 0.3);
  --rom-shadow-crimson: 0 0 20px rgba(139, 45, 58, 0.3);
  --rom-glow-candle: 0 0 40px rgba(212, 160, 74, 0.15);

  /* Typography */
  --rom-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --rom-font-heading: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --rom-font-body: 'Crimson Pro', 'Georgia', 'Times New Roman', serif;
  --rom-font-accent: 'EB Garamond', 'Garamond', serif;
  --rom-font-sans: 'Raleway', 'Gill Sans', 'Calibri', sans-serif;

  /* Spacing */
  --rom-space-xs: 0.25rem;
  --rom-space-sm: 0.5rem;
  --rom-space-md: 1rem;
  --rom-space-lg: 2rem;
  --rom-space-xl: 4rem;
  --rom-space-2xl: 6rem;

  /* Border Radius */
  --rom-radius-sm: 3px;
  --rom-radius-md: 6px;
  --rom-radius-lg: 12px;

  /* Transitions */
  --rom-transition-smooth: 0.4s ease;
  --rom-transition-dramatic: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Typography

Romantic typography channels the high drama of 19th-century title pages, theatrical playbills, and fine book design. Typefaces are serif-dominant, favoring high-contrast transitional and Didone faces for display use, with sturdy old-style serifs for body text. Italics are used generously -- they are the Romantic typographer's primary expressive tool, conveying emotion, emphasis, and the intimate aside. Scale is dramatic: headings are large and commanding, body text is generous and legible, and the contrast between levels creates the same tension between grandeur and intimacy that characterizes Romantic art. Letter-spacing is tight for display headings and relaxed for body copy. Ornamental initial caps, small-caps for attributions, and carefully placed em-dashes all reference the typographic conventions of the era.

Font Style Best For
Playfair Display High-contrast transitional serif with elegant hairlines and dramatic stroke variation Hero titles, display headings, dramatic pull quotes
Cormorant Garamond Refined, tall Garamond revival with graceful italics and scholarly elegance Section headings, subheadings, literary passages
Crimson Pro Warm old-style serif designed for comfortable screen reading Body text, article content, long-form reading
EB Garamond Faithful Claude Garamond revival with old-style figures and rich italics Block quotes, accent text, attributions, captions
Raleway Elegant thin-to-bold sans-serif with Art Deco undertones Navigation, UI labels, small caps, metadata
UnifrakturMaguntia Blackletter/Fraktur face evoking gothic manuscript tradition Decorative initials, ornamental headings, section breaks
Spectral Highly readable serif with generous x-height, designed for screen Alternative body text, responsive-friendly content
Cinzel All-caps inscriptional serif inspired by Roman stone carving Overlines, category labels, monumental titling

Font Pairing Suggestions

Heading Font Body Font Mood
Playfair Display (700) Crimson Pro Grand drama meets comfortable reading -- the core Romantic pairing
Cormorant Garamond (600i) EB Garamond Deep literary elegance, scholarly and introspective
Playfair Display (900) Raleway (300) Maximum contrast: Romantic grandeur against refined modern clarity
Cinzel (700) Crimson Pro Monumental and inscriptional, evoking classical ruins and engravings
Cormorant Garamond (500) Spectral Warm and approachable, emphasizing readability within the aesthetic

CSS Example

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

/* === Base Typography === */
body {
  font-family: var(--rom-font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--rom-text-light);
  background-color: var(--rom-bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rom-font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rom-text-light);
}

h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
}

h2 {
  font-family: var(--rom-font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 500;
}

h3 {
  font-family: var(--rom-font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}

a {
  color: var(--rom-gold);
  text-decoration: none;
  transition: color var(--rom-transition-smooth);
}

a:hover {
  color: var(--rom-gold-bright);
  text-shadow: 0 0 8px rgba(200, 148, 62, 0.3);
}

blockquote {
  font-family: var(--rom-font-accent);
  font-size: 1.3125rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--rom-text-parchment);
  border-left: 3px solid var(--rom-gold);
  padding-left: var(--rom-space-lg);
  margin: var(--rom-space-xl) 0;
}

/* Overline / Category Label */
.rom-overline {
  font-family: var(--rom-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rom-gold);
}

/* Drop Cap */
.rom-dropcap::first-letter {
  font-family: var(--rom-font-display);
  font-size: 4em;
  float: left;
  line-height: 0.75;
  margin-right: 0.08em;
  margin-top: 0.07em;
  color: var(--rom-gold);
  text-shadow: 2px 2px 4px rgba(26, 17, 24, 0.4);
}

Layout Principles

  • Full-bleed immersive heroes -- hero sections should span the full viewport height and width, using dramatic background imagery or atmospheric gradients to immediately establish the emotional tone; the viewer should feel as though they are stepping into a painting
  • Centered, narrow reading measure -- body text should occupy a comfortable 60-75 character line width (max-width 680-820px), echoing the proportions of a well-designed book page with generous margins
  • Dramatic vertical scale -- sections should use generous padding (100-150px on desktop) to create breathing room and a sense of vastness; do not compress the vertical rhythm into dense, information-packed layouts
  • Layered depth composition -- use overlapping elements, semi-transparent overlays, and z-index layering to create a sense of spatial depth reminiscent of atmospheric perspective in landscape painting
  • Asymmetric editorial layout -- allow pull quotes, ornamental elements, and images to break the central column, creating an editorial rhythm that mirrors the dynamic compositions of Romantic painting
  • Full-width imagery as section breaks -- large-format nature photography or classical painting reproductions, displayed edge-to-edge, serve as dramatic transitions between content sections
  • Dark-dominant page structure -- backgrounds should be predominantly dark (deep plum, charcoal, midnight), with light text and golden accents; light sections appear as luminous clearings within the darkness, like shafts of light in a storm
  • Ornamental section dividers -- use decorative rules, fleurons, or small ornamental SVGs between sections rather than plain whitespace or simple horizontal lines
  • Responsive depth preservation -- on mobile, maintain the atmospheric quality by keeping dark backgrounds and textured overlays; reduce padding proportionally but never flatten to a bright, plain layout

CSS / Design Techniques

Card Component

A content card with painterly depth, warm glow on hover, and subtle canvas texture -- evoking a framed painting in a dimly lit gallery.

.rom-card {
  position: relative;
  background: var(--rom-bg-secondary);
  border: 1px solid rgba(200, 148, 62, 0.15);
  border-radius: var(--rom-radius-md);
  padding: var(--rom-space-lg);
  overflow: hidden;
  box-shadow: var(--rom-shadow-md);
  transition:
    box-shadow var(--rom-transition-dramatic),
    transform var(--rom-transition-dramatic),
    border-color var(--rom-transition-smooth);
}

.rom-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' 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;
  border-radius: inherit;
}

.rom-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rom-shadow-lg), var(--rom-shadow-gold);
  border-color: rgba(200, 148, 62, 0.35);
}

.rom-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--rom-radius-sm);
  margin-bottom: var(--rom-space-md);
  filter: saturate(0.85) contrast(1.05);
  transition: filter var(--rom-transition-dramatic);
}

.rom-card:hover .rom-card__image {
  filter: saturate(1) contrast(1.1);
}

.rom-card__category {
  font-family: var(--rom-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rom-gold);
  margin-bottom: var(--rom-space-sm);
}

.rom-card__title {
  font-family: var(--rom-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rom-text-light);
  margin-bottom: var(--rom-space-sm);
}

.rom-card__excerpt {
  font-family: var(--rom-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--rom-text-muted);
}

Button Component

Buttons with dramatic presence -- dark surfaces with gold accents, warm glow on hover, and a sense of weight befitting the Romantic aesthetic.

/* Primary -- Dark with gold border and glow */
.rom-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rom-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rom-gold);
  background: transparent;
  border: 1.5px solid var(--rom-gold);
  border-radius: var(--rom-radius-sm);
  padding: 0.875rem 2rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color var(--rom-transition-smooth),
    background var(--rom-transition-smooth),
    box-shadow var(--rom-transition-smooth),
    border-color var(--rom-transition-smooth);
}

.rom-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rom-gold);
  opacity: 0;
  transition: opacity var(--rom-transition-smooth);
}

.rom-button:hover {
  color: var(--rom-bg-deep);
  border-color: var(--rom-gold-bright);
  box-shadow: var(--rom-shadow-gold);
}

.rom-button:hover::before {
  opacity: 1;
}

.rom-button span {
  position: relative;
  z-index: 1;
}

/* Crimson variant */
.rom-button--crimson {
  color: var(--rom-text-light);
  background: var(--rom-crimson);
  border-color: var(--rom-crimson);
}

.rom-button--crimson::before {
  background: var(--rom-vermillion);
}

.rom-button--crimson:hover {
  color: var(--rom-text-light);
  border-color: var(--rom-vermillion);
  box-shadow: var(--rom-shadow-crimson);
}

/* Ghost variant for secondary actions */
.rom-button--ghost {
  border-color: rgba(240, 230, 211, 0.25);
  color: var(--rom-text-parchment);
}

.rom-button--ghost::before {
  background: rgba(240, 230, 211, 0.08);
}

.rom-button--ghost:hover {
  color: var(--rom-text-light);
  border-color: rgba(240, 230, 211, 0.5);
  box-shadow: none;
}

A refined navigation that hovers between visibility and atmosphere -- dark, semi-transparent, with gold accents and an understated presence that does not compete with the dramatic content below.

.rom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 4rem;
  background: rgba(26, 17, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 148, 62, 0.12);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background var(--rom-transition-smooth);
}

.rom-nav--scrolled {
  background: rgba(26, 17, 24, 0.95);
  box-shadow: var(--rom-shadow-md);
}

.rom-nav__logo {
  font-family: var(--rom-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--rom-text-light);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.rom-nav__links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rom-nav__link {
  font-family: var(--rom-font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rom-text-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition:
    color var(--rom-transition-smooth),
    border-color var(--rom-transition-smooth);
}

.rom-nav__link:hover,
.rom-nav__link--active {
  color: var(--rom-text-light);
  border-bottom-color: var(--rom-gold);
}

Hero Section

A full-viewport hero section with layered atmospheric effects -- background image, gradient overlay, vignette, and luminous typography that emerges from the darkness like a vision.

.rom-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding: var(--rom-space-2xl) var(--rom-space-lg);
  background: var(--rom-bg-deep);
  overflow: hidden;
}

.rom-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.7) brightness(0.4);
  transition: filter 1.2s ease;
}

.rom-hero:hover .rom-hero__bg {
  filter: saturate(0.85) brightness(0.45);
}

/* Atmospheric gradient overlay */
.rom-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 17, 24, 0.5) 0%, rgba(44, 36, 51, 0.3) 50%, rgba(26, 17, 24, 0.8) 100%),
    var(--rom-gradient-vignette);
  pointer-events: none;
}

.rom-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.rom-hero__overline {
  font-family: var(--rom-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rom-gold);
  margin-bottom: var(--rom-space-lg);
}

.rom-hero__title {
  font-family: var(--rom-font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--rom-text-light);
  text-shadow: 0 2px 20px rgba(26, 17, 24, 0.6);
  margin-bottom: var(--rom-space-lg);
}

.rom-hero__subtitle {
  font-family: var(--rom-font-accent);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--rom-text-parchment);
  opacity: 0.85;
  max-width: 50ch;
  margin: 0 auto var(--rom-space-xl);
}

.rom-hero__ornament {
  width: 100px;
  height: 1px;
  background: var(--rom-gold);
  margin: 0 auto var(--rom-space-lg);
  position: relative;
  opacity: 0.6;
}

.rom-hero__ornament::before {
  content: '\2726';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  color: var(--rom-gold);
  background: transparent;
  padding: 0 0.75rem;
  text-shadow: 0 0 10px rgba(200, 148, 62, 0.5);
}

Painterly Vignette Overlay

A reusable overlay that adds the darkened-edge vignette characteristic of Romantic painting, focusing the viewer's eye on the illuminated center of the composition.

.rom-vignette {
  position: relative;
  overflow: hidden;
}

.rom-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    transparent 30%,
    rgba(26, 17, 24, 0.25) 60%,
    rgba(26, 17, 24, 0.65) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Intense variant for hero images */
.rom-vignette--intense::after {
  background: radial-gradient(
    ellipse 60% 50% at 50% 40%,
    transparent 20%,
    rgba(26, 17, 24, 0.35) 50%,
    rgba(26, 17, 24, 0.85) 100%
  );
}

/* Warm variant with golden tone */
.rom-vignette--warm::after {
  background: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    rgba(200, 148, 62, 0.05) 20%,
    rgba(139, 45, 58, 0.15) 50%,
    rgba(26, 17, 24, 0.7) 100%
  );
}

Storm Gradient Background

A dramatic multi-layered gradient that simulates the turbulent skies of Turner's seascapes -- dark storm clouds shot through with shafts of golden light.

.rom-storm-bg {
  position: relative;
  background:
    linear-gradient(
      175deg,
      #1A1118 0%,
      #2C2433 15%,
      #3D2F47 30%,
      #3B5F8A 50%,
      #5C2A35 65%,
      #C8943E 82%,
      #D4A04A 90%,
      #F0E6D3 100%
    );
  background-size: 100% 200%;
  animation: rom-storm-shift 20s ease-in-out infinite alternate;
}

@keyframes rom-storm-shift {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 50%; }
}

/* Static variant without animation */
.rom-storm-bg--static {
  background-size: 100% 100%;
  animation: none;
}

/* Overlay canvas texture on top of storm */
.rom-storm-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f0e6d3' fill-opacity='0.02'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%231a1118' fill-opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}

Ornamental Frame

A CSS-only decorative frame that evokes the gilded picture frames of 19th-century gallery walls, suitable for wrapping featured images or pull quotes.

.rom-frame {
  position: relative;
  padding: 1.5rem;
  border: 1px solid rgba(200, 148, 62, 0.3);
  border-radius: var(--rom-radius-sm);
}

/* Inner double-line border */
.rom-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(200, 148, 62, 0.15);
  border-radius: 2px;
  pointer-events: none;
}

/* Corner ornaments */
.rom-frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    /* Top-left corner */
    radial-gradient(circle 3px at 0% 0%, var(--rom-gold) 50%, transparent 51%),
    /* Top-right corner */
    radial-gradient(circle 3px at 100% 0%, var(--rom-gold) 50%, transparent 51%),
    /* Bottom-left corner */
    radial-gradient(circle 3px at 0% 100%, var(--rom-gold) 50%, transparent 51%),
    /* Bottom-right corner */
    radial-gradient(circle 3px at 100% 100%, var(--rom-gold) 50%, transparent 51%);
}

/* Featured image variant -- more elaborate */
.rom-frame--featured {
  padding: 2rem;
  border-width: 2px;
  border-color: rgba(200, 148, 62, 0.4);
  box-shadow:
    inset 0 0 30px rgba(26, 17, 24, 0.3),
    0 8px 32px rgba(26, 17, 24, 0.4);
}

.rom-frame--featured::before {
  inset: 10px;
  border-width: 2px;
  border-color: rgba(200, 148, 62, 0.2);
}

Dramatic Lighting Overlay

A candlelight/firelight glow effect that can be applied to any section, creating a warm radial light source that illuminates content from within the darkness.

.rom-candlelight {
  position: relative;
}

.rom-candlelight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 60% at 50% 30%,
    rgba(212, 160, 74, 0.12) 0%,
    rgba(200, 148, 62, 0.06) 30%,
    rgba(139, 45, 58, 0.03) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Flicker animation for subtle life */
.rom-candlelight--animated::before {
  animation: rom-flicker 8s ease-in-out infinite;
}

@keyframes rom-flicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.92; }
  50% { opacity: 1; }
  75% { opacity: 0.95; }
}

/* Side-lit variant -- light from the left, like a window */
.rom-candlelight--side::before {
  background: radial-gradient(
    ellipse 40% 80% at 15% 50%,
    rgba(212, 160, 74, 0.1) 0%,
    rgba(200, 148, 62, 0.04) 40%,
    transparent 70%
  );
}

/* Warm light pooling from above */
.rom-candlelight--above::before {
  background: radial-gradient(
    ellipse 60% 40% at 50% 0%,
    rgba(212, 160, 74, 0.15) 0%,
    rgba(200, 148, 62, 0.05) 50%,
    transparent 80%
  );
}

Design Do's and Don'ts

Do's

  • Use dramatic, atmospheric photography -- stormy skies, fog-shrouded landscapes, candlelit interiors, ruins, and wild nature shot during golden hour or twilight
  • Layer textures beneath content -- subtle canvas grain, parchment, craquelure, or paint-stroke patterns at very low opacity (2-5%) add the tactile quality of oil painting
  • Employ deep, layered shadows -- multiple shadow layers with warm undertones create depth reminiscent of gallery lighting on framed paintings
  • Use generous typographic scale -- hero headings should be large and commanding; let serif type breathe with ample line-height and generous margins
  • Apply vignette effects -- darken edges of hero images and full-bleed sections with radial gradients to focus attention and evoke the framing of Romantic canvases
  • Embrace warm-cool color tension -- pair golden/amber/crimson warm tones against slate/teal/dusky purple cool tones for emotional dynamism
  • Use italic serif type expressively -- for subtitles, attributions, pull quotes, and any text meant to convey feeling or intimacy
  • Add subtle glow effects -- CSS box-shadow and text-shadow with warm rgba values simulate candlelight and firelight, adding warmth to interactive elements
  • Include ornamental dividers -- fleurons, thin decorative rules, and small classical ornaments between sections honor the Romantic tradition of elaborate bookmaking
  • Treat dark backgrounds as your canvas -- deep plums, charcoals, and midnight tones serve as the ground layer from which light and color emerge dramatically

Don'ts

  • Don't use flat, bright backgrounds -- pure white or light gray backgrounds strip away the atmospheric depth essential to the aesthetic
  • Don't choose geometric sans-serif as primary type -- Helvetica, Inter, and Montserrat are antithetical to the Romantic spirit; reserve sans-serif for small UI elements only
  • Don't apply garish neon or fluorescent accents -- all colors should feel as though they have been mixed on a painter's palette, rich but never synthetic
  • Don't flatten the design -- Romanticism thrives on depth, layering, and atmospheric perspective; flat cards with no shadow, texture, or gradient lose the essence
  • Don't use clinical, stock photography -- smiling professionals in conference rooms, product shots on white backgrounds, and corporate imagery destroy the aesthetic instantly
  • Don't over-animate -- subtle transitions and slow, gentle hover effects are appropriate; bouncy, playful, or rapid animations break the contemplative mood
  • Don't neglect contrast and accessibility -- atmospheric darkness must not come at the cost of readability; ensure body text meets WCAG AA contrast requirements against dark backgrounds
  • Don't crowd the layout -- Romanticism is about grandeur and breathing room, not information density; let the vast scale of sections do the emotional work
  • Don't use sharp, mechanical borders -- favor soft borders with low-opacity warm colors; if visible borders are needed, use double-line ornamental frames rather than solid 2px black lines
  • Don't ignore mobile atmosphere -- on small screens, maintain the dark palette, textured backgrounds, and atmospheric quality; do not fall back to a generic light-mode mobile design
Aesthetic Relationship
Dark Academia Shares the moody, scholarly, candlelit atmosphere and serif-heavy typography, but Dark Academia emphasizes intellectual pursuit and gothic architecture where Romanticism emphasizes raw emotional experience and sublime nature
Light Academia The sunlit counterpart; both draw from classical traditions and literary culture, but Light Academia's warm ivory palette and gentle optimism contrast with Romanticism's dramatic darkness and emotional intensity
Whimsigothic Overlaps in dark palettes, ornamental detail, and a love of the mysterious, but Whimsigothic adds playful eclecticism and modern witchcore elements that Romanticism's historical gravity resists
Editorial Magazine Layout Shares dramatic scale, typographic hierarchy, and bold imagery, but Editorial design is cooler and more controlled where Romanticism is warmer and more emotionally charged
Wabi-Sabi Both celebrate the beauty of imperfection, age, and natural process, but Wabi-Sabi finds quiet acceptance where Romanticism finds passionate intensity
Art Nouveau Historical successor that shares organic forms, nature worship, and ornamental richness, but Art Nouveau formalizes these into decorative system where Romanticism keeps them wild and uncontained
Duotone Both create dramatic contrast through limited color, but Duotone is a modern graphic technique where Romanticism uses full painterly color within a chiaroscuro framework
Parallax Design Shares the sense of depth and immersive layered storytelling, and Parallax scrolling effects can powerfully enhance Romantic atmospherics when applied with restraint

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>The Wanderer -- A Romanticism Gallery</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    /* ===========================
       CSS Custom Properties
       =========================== */
    :root {
      --rom-bg-deep: #1A1118;
      --rom-bg-primary: #2C2433;
      --rom-bg-secondary: #3D2F47;
      --rom-surface-parchment: #F0E6D3;
      --rom-surface-ivory: #FAF4EA;
      --rom-surface-warm: #E8DCCA;
      --rom-text-light: #FAF4EA;
      --rom-text-parchment: #F0E6D3;
      --rom-text-muted: #8E8A93;
      --rom-text-dark: #2C2433;
      --rom-gold: #C8943E;
      --rom-gold-bright: #D4A04A;
      --rom-crimson: #8B2D3A;
      --rom-vermillion: #C44B3F;
      --rom-sienna: #A0522D;
      --rom-rose: #8A4F5E;
      --rom-blue: #3B5F8A;
      --rom-teal: #2E6B6B;
      --rom-slate: #4A5568;
      --rom-fog: #8E8A93;
      --rom-shadow-sm: 0 2px 8px rgba(26, 17, 24, 0.3);
      --rom-shadow-md: 0 4px 16px rgba(26, 17, 24, 0.4);
      --rom-shadow-lg: 0 8px 32px rgba(26, 17, 24, 0.5);
      --rom-shadow-gold: 0 0 20px rgba(200, 148, 62, 0.3);
      --rom-font-display: 'Playfair Display', Georgia, serif;
      --rom-font-heading: 'Cormorant Garamond', Garamond, serif;
      --rom-font-body: 'Crimson Pro', Georgia, serif;
      --rom-font-accent: 'EB Garamond', Garamond, serif;
      --rom-font-sans: 'Raleway', 'Gill Sans', sans-serif;
      --rom-font-cinzel: 'Cinzel', 'Times New Roman', serif;
      --rom-transition-smooth: 0.4s ease;
      --rom-transition-dramatic: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* ===========================
       Reset & Base
       =========================== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--rom-font-body);
      font-size: 1.0625rem;
      line-height: 1.8;
      color: var(--rom-text-light);
      background-color: var(--rom-bg-deep);
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--rom-gold); text-decoration: none; transition: color var(--rom-transition-smooth); }
    a:hover { color: var(--rom-gold-bright); text-shadow: 0 0 8px rgba(200, 148, 62, 0.3); }

    /* ===========================
       Navigation
       =========================== */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 4rem;
      background: rgba(26, 17, 24, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(200, 148, 62, 0.12);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
    }

    .nav__logo {
      font-family: var(--rom-font-display);
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--rom-text-light);
      text-decoration: none;
      letter-spacing: -0.01em;
    }

    .nav__links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
    }

    .nav__links a {
      font-family: var(--rom-font-sans);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--rom-text-muted);
      text-decoration: none;
      padding-bottom: 3px;
      border-bottom: 1.5px solid transparent;
      transition: color var(--rom-transition-smooth), border-color var(--rom-transition-smooth);
    }

    .nav__links a:hover,
    .nav__links a.active {
      color: var(--rom-text-light);
      border-bottom-color: var(--rom-gold);
    }

    /* ===========================
       Hero Section
       =========================== */
    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 100vh;
      padding: 8rem 2rem 6rem;
      overflow: hidden;
      background:
        linear-gradient(
          175deg,
          #1A1118 0%,
          #2C2433 20%,
          #3D2F47 35%,
          #3B5F8A 50%,
          #5C2A35 68%,
          #C8943E 85%,
          #D4A04A 95%
        );
    }

    /* Vignette overlay */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse 65% 55% at 50% 42%,
        transparent 25%,
        rgba(26, 17, 24, 0.3) 55%,
        rgba(26, 17, 24, 0.7) 100%
      );
      pointer-events: none;
      z-index: 1;
    }

    /* Canvas texture */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f0e6d3' fill-opacity='0.015'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%231a1118' fill-opacity='0.025'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 2;
    }

    .hero__content {
      position: relative;
      z-index: 3;
      max-width: 800px;
    }

    .hero__overline {
      font-family: var(--rom-font-cinzel);
      font-size: 0.6875rem;
      font-weight: 400;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--rom-gold);
      margin-bottom: 2rem;
      text-shadow: 0 0 15px rgba(200, 148, 62, 0.4);
    }

    .hero__title {
      font-family: var(--rom-font-display);
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 700;
      line-height: 1.05;
      color: var(--rom-text-light);
      text-shadow: 0 2px 30px rgba(26, 17, 24, 0.5);
      margin-bottom: 2rem;
    }

    .hero__ornament {
      width: 120px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--rom-gold), transparent);
      margin: 0 auto 2rem;
      position: relative;
    }

    .hero__ornament::before {
      content: '\2726';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.875rem;
      color: var(--rom-gold);
      text-shadow: 0 0 10px rgba(200, 148, 62, 0.5);
    }

    .hero__subtitle {
      font-family: var(--rom-font-accent);
      font-size: clamp(1.125rem, 2vw, 1.5rem);
      font-style: italic;
      line-height: 1.7;
      color: var(--rom-text-parchment);
      opacity: 0.85;
      max-width: 48ch;
      margin: 0 auto 3rem;
    }

    .hero__buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ===========================
       Buttons
       =========================== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--rom-font-sans);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 3px;
      padding: 0.875rem 2.25rem;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all var(--rom-transition-smooth);
    }

    .btn--gold {
      color: var(--rom-gold);
      background: transparent;
      border: 1.5px solid var(--rom-gold);
    }

    .btn--gold:hover {
      color: var(--rom-bg-deep);
      background: var(--rom-gold);
      box-shadow: var(--rom-shadow-gold);
      text-shadow: none;
    }

    .btn--ghost {
      color: var(--rom-text-parchment);
      background: transparent;
      border: 1.5px solid rgba(240, 230, 211, 0.25);
    }

    .btn--ghost:hover {
      color: var(--rom-text-light);
      border-color: rgba(240, 230, 211, 0.5);
      background: rgba(240, 230, 211, 0.06);
      text-shadow: none;
    }

    .btn--crimson {
      color: var(--rom-text-light);
      background: var(--rom-crimson);
      border: 1.5px solid var(--rom-crimson);
    }

    .btn--crimson:hover {
      background: var(--rom-vermillion);
      border-color: var(--rom-vermillion);
      box-shadow: 0 0 20px rgba(139, 45, 58, 0.3);
      text-shadow: none;
    }

    /* ===========================
       Section Utilities
       =========================== */
    .section {
      padding: 6rem 2rem;
      position: relative;
    }

    .section--dark {
      background: var(--rom-bg-deep);
    }

    .section--medium {
      background: var(--rom-bg-primary);
    }

    .section--secondary {
      background: var(--rom-bg-secondary);
    }

    .section--parchment {
      background: var(--rom-surface-parchment);
      color: var(--rom-text-dark);
    }

    .section__container {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .section__header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .section__overline {
      font-family: var(--rom-font-cinzel);
      font-size: 0.6875rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--rom-gold);
      margin-bottom: 0.75rem;
    }

    .section--parchment .section__overline {
      color: var(--rom-sienna);
    }

    .section__title {
      font-family: var(--rom-font-display);
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--rom-text-light);
      margin-bottom: 1rem;
    }

    .section--parchment .section__title {
      color: var(--rom-text-dark);
    }

    .section__desc {
      font-family: var(--rom-font-accent);
      font-size: 1.125rem;
      font-style: italic;
      color: var(--rom-text-muted);
      max-width: 50ch;
      margin: 0 auto;
      line-height: 1.7;
    }

    .section--parchment .section__desc {
      color: var(--rom-slate);
    }

    /* ===========================
       Ornamental Divider
       =========================== */
    .divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      max-width: 280px;
      margin: 0 auto 3rem;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200, 148, 62, 0.4), transparent);
    }

    .divider__icon {
      font-size: 0.875rem;
      color: var(--rom-gold);
      opacity: 0.6;
    }

    /* ===========================
       Card Grid
       =========================== */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 2rem;
    }

    .card {
      position: relative;
      background: var(--rom-bg-secondary);
      border: 1px solid rgba(200, 148, 62, 0.12);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: var(--rom-shadow-md);
      transition: box-shadow var(--rom-transition-dramatic), transform var(--rom-transition-dramatic), border-color var(--rom-transition-smooth);
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--rom-shadow-lg), var(--rom-shadow-gold);
      border-color: rgba(200, 148, 62, 0.3);
    }

    .card__img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      filter: saturate(0.8) contrast(1.05);
      transition: filter var(--rom-transition-dramatic);
    }

    .card:hover .card__img {
      filter: saturate(1) contrast(1.1);
    }

    .card__body {
      padding: 1.75rem;
    }

    .card__tag {
      display: inline-block;
      font-family: var(--rom-font-sans);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--rom-gold);
      background: rgba(200, 148, 62, 0.1);
      border: 1px solid rgba(200, 148, 62, 0.2);
      border-radius: 9999px;
      padding: 0.25rem 0.75rem;
      margin-bottom: 1rem;
    }

    .card__tag--crimson {
      color: var(--rom-vermillion);
      background: rgba(196, 75, 63, 0.1);
      border-color: rgba(196, 75, 63, 0.2);
    }

    .card__tag--blue {
      color: var(--rom-blue);
      background: rgba(59, 95, 138, 0.12);
      border-color: rgba(59, 95, 138, 0.2);
    }

    .card__title {
      font-family: var(--rom-font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--rom-text-light);
      margin-bottom: 0.5rem;
    }

    .card__excerpt {
      font-family: var(--rom-font-body);
      font-size: 0.9375rem;
      line-height: 1.7;
      color: var(--rom-text-muted);
      margin-bottom: 1.25rem;
    }

    .card__link {
      font-family: var(--rom-font-sans);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--rom-gold);
    }

    .card__link:hover {
      color: var(--rom-gold-bright);
    }

    /* ===========================
       Ornamental Frame
       =========================== */
    .frame {
      position: relative;
      padding: 2rem;
      border: 1px solid rgba(200, 148, 62, 0.3);
      border-radius: 3px;
    }

    .frame::before {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(200, 148, 62, 0.12);
      border-radius: 2px;
      pointer-events: none;
    }

    /* ===========================
       Pull Quote
       =========================== */
    .pullquote {
      max-width: 720px;
      margin: 0 auto;
      padding: 3rem 2rem;
      text-align: center;
      position: relative;
    }

    .pullquote::before {
      content: '\201C';
      display: block;
      font-family: var(--rom-font-display);
      font-size: 6rem;
      line-height: 0.6;
      color: var(--rom-gold);
      opacity: 0.2;
      margin-bottom: 1rem;
    }

    .pullquote__text {
      font-family: var(--rom-font-accent);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-style: italic;
      line-height: 1.7;
      color: var(--rom-text-parchment);
    }

    .pullquote__attribution {
      display: block;
      margin-top: 1.5rem;
      font-family: var(--rom-font-sans);
      font-size: 0.75rem;
      font-style: normal;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--rom-text-muted);
    }

    .pullquote__attribution::before {
      content: '\2014\00a0';
    }

    /* ===========================
       Candlelight Glow Effect
       =========================== */
    .candlelight {
      position: relative;
    }

    .candlelight::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse 50% 60% at 50% 30%,
        rgba(212, 160, 74, 0.08) 0%,
        rgba(200, 148, 62, 0.03) 40%,
        transparent 70%
      );
      pointer-events: none;
    }

    /* ===========================
       Prose / Article
       =========================== */
    .prose {
      max-width: 700px;
      margin: 0 auto;
    }

    .prose p {
      margin-bottom: 1.5rem;
      color: var(--rom-text-parchment);
    }

    .prose p:first-of-type::first-letter {
      font-family: var(--rom-font-display);
      font-size: 4em;
      float: left;
      line-height: 0.75;
      margin-right: 0.08em;
      margin-top: 0.05em;
      color: var(--rom-gold);
      text-shadow: 2px 2px 6px rgba(26, 17, 24, 0.4);
    }

    .prose h2 {
      font-family: var(--rom-font-heading);
      font-size: 1.75rem;
      font-weight: 500;
      color: var(--rom-text-light);
      margin: 3rem 0 1rem;
    }

    /* ===========================
       Parchment Section Cards
       =========================== */
    .parchment-card {
      background: var(--rom-surface-parchment);
      border-radius: 6px;
      padding: 2.5rem;
      box-shadow: var(--rom-shadow-md);
      position: relative;
      overflow: hidden;
    }

    .parchment-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse at 50% 0%,
        rgba(200, 148, 62, 0.08) 0%,
        transparent 60%
      );
      pointer-events: none;
    }

    .parchment-card__title {
      font-family: var(--rom-font-heading);
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--rom-text-dark);
      margin-bottom: 0.75rem;
    }

    .parchment-card__text {
      font-family: var(--rom-font-body);
      font-size: 1rem;
      line-height: 1.75;
      color: var(--rom-slate);
    }

    /* ===========================
       Footer
       =========================== */
    .footer {
      background: var(--rom-bg-deep);
      border-top: 1px solid rgba(200, 148, 62, 0.1);
      padding: 4rem 2rem 2rem;
      text-align: center;
    }

    .footer__logo {
      font-family: var(--rom-font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--rom-text-light);
      margin-bottom: 0.5rem;
    }

    .footer__tagline {
      font-family: var(--rom-font-accent);
      font-style: italic;
      font-size: 0.9375rem;
      color: var(--rom-text-muted);
      margin-bottom: 2rem;
    }

    .footer__links {
      display: flex;
      justify-content: center;
      gap: 2rem;
      list-style: none;
      margin-bottom: 2.5rem;
      flex-wrap: wrap;
    }

    .footer__links a {
      font-family: var(--rom-font-sans);
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--rom-text-muted);
      text-decoration: none;
      transition: color var(--rom-transition-smooth);
    }

    .footer__links a:hover {
      color: var(--rom-gold);
      text-shadow: none;
    }

    .footer__rule {
      width: 60px;
      height: 1px;
      background: rgba(200, 148, 62, 0.15);
      margin: 0 auto 1.5rem;
    }

    .footer__copy {
      font-family: var(--rom-font-sans);
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
      color: rgba(142, 138, 147, 0.5);
    }

    /* ===========================
       Responsive
       =========================== */
    @media (max-width: 768px) {
      .nav {
        padding: 1rem 1.5rem;
      }

      .nav__links {
        display: none;
      }

      .hero {
        padding: 6rem 1.5rem 4rem;
      }

      .section {
        padding: 4rem 1.5rem;
      }

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

      .footer__links {
        gap: 1rem 1.5rem;
      }

      .pullquote {
        padding: 2rem 1rem;
      }

      .frame {
        padding: 1.25rem;
      }

      .frame::before {
        inset: 5px;
      }
    }
  </style>
</head>
<body>

  <!-- ===========================
       Navigation
       =========================== -->
  <nav class="nav">
    <a href="#" class="nav__logo">The Wanderer</a>
    <ul class="nav__links">
      <li><a href="#gallery" class="active">Gallery</a></li>
      <li><a href="#sublime">The Sublime</a></li>
      <li><a href="#passage">Passage</a></li>
      <li><a href="#manifesto">Manifesto</a></li>
    </ul>
  </nav>

  <!-- ===========================
       Hero Section
       =========================== -->
  <header class="hero">
    <div class="hero__content">
      <span class="hero__overline">An Ode to the Sublime</span>
      <h1 class="hero__title">Above the Sea of Fog</h1>
      <div class="hero__ornament"></div>
      <p class="hero__subtitle">Where storm meets solitude and the vast indifference of nature becomes the mirror of the human soul. A journey through the landscapes of Romantic art and thought.</p>
      <div class="hero__buttons">
        <a href="#gallery" class="btn btn--gold">Enter the Gallery</a>
        <a href="#sublime" class="btn btn--ghost">Explore the Sublime</a>
      </div>
    </div>
  </header>

  <!-- ===========================
       Gallery Section
       =========================== -->
  <section id="gallery" class="section section--medium candlelight">
    <div class="section__container">
      <div class="section__header">
        <p class="section__overline">The Collection</p>
        <h2 class="section__title">Visions of the Romantic Age</h2>
        <div class="divider"><span class="divider__icon">&#10086;</span></div>
        <p class="section__desc">Paintings that shook the foundations of reason, replacing cold logic with the thundering voice of the heart.</p>
      </div>

      <div class="cards">
        <article class="card">
          <img class="card__img" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&h=440&fit=crop" alt="Dramatic mountain peak emerging from clouds and mist">
          <div class="card__body">
            <span class="card__tag">The Sublime</span>
            <h3 class="card__title">Wanderer Above the Sea of Fog</h3>
            <p class="card__excerpt">A solitary figure gazes into an infinite expanse of fog and mountain, embodying the Romantic confrontation between human will and nature's overwhelming power.</p>
            <a href="#" class="card__link">Study this work &rarr;</a>
          </div>
        </article>

        <article class="card">
          <img class="card__img" src="https://images.unsplash.com/photo-1534088568595-a066f410bcda?w=600&h=440&fit=crop" alt="Stormy ocean waves crashing against dark rocks at twilight">
          <div class="card__body">
            <span class="card__tag card__tag--crimson">Storm &amp; Fury</span>
            <h3 class="card__title">The Slave Ship</h3>
            <p class="card__excerpt">Turner's molten skies dissolve the boundary between sea and atmosphere, transforming a scene of horror into an act of transcendent, terrible beauty through pure light and color.</p>
            <a href="#" class="card__link">Study this work &rarr;</a>
          </div>
        </article>

        <article class="card">
          <img class="card__img" src="https://images.unsplash.com/photo-1518173946687-a1e0e2a2f635?w=600&h=440&fit=crop" alt="Ancient stone ruins overgrown with vines and moss in golden light">
          <div class="card__body">
            <span class="card__tag card__tag--blue">Ruins &amp; Time</span>
            <h3 class="card__title">The Abbey in the Oakwood</h3>
            <p class="card__excerpt">Friedrich's shattered Gothic abbey, reclaimed by nature, speaks to the impermanence of human endeavor and the quiet triumph of the organic over the architectural.</p>
            <a href="#" class="card__link">Study this work &rarr;</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ===========================
       Pull Quote Section
       =========================== -->
  <section class="section section--dark">
    <div class="frame" style="max-width: 800px; margin: 0 auto;">
      <div class="pullquote">
        <p class="pullquote__text">The painter should paint not only what he has in front of him, but also what he sees inside himself. If he sees nothing within, he should stop painting what is in front of him.</p>
        <span class="pullquote__attribution">Caspar David Friedrich</span>
      </div>
    </div>
  </section>

  <!-- ===========================
       The Sublime Section
       =========================== -->
  <section id="sublime" class="section section--secondary candlelight">
    <div class="section__container">
      <div class="section__header">
        <p class="section__overline">Philosophy</p>
        <h2 class="section__title">Understanding the Sublime</h2>
        <div class="divider"><span class="divider__icon">&#10038;</span></div>
      </div>

      <div class="prose">
        <p>The Romantics discovered in the natural world something that classical art had methodically excluded: terror. Not the terror of violence or cruelty, but the deep, existential vertigo that seizes the human mind when confronted by something so vast, so powerful, so indifferent to human concerns that all our careful rationality dissolves into wordless awe. Edmund Burke called it the Sublime, and it became the engine that drove Romantic art beyond the measured harmonies of the Enlightenment into territories of raw feeling that no previous generation had dared to paint.</p>

        <h2>Storm as Revelation</h2>

        <p>Consider what it means to stand on a cliff edge in a storm. The wind tears at your coat, the sea heaves and crashes against stone far below, lightning splits a sky that has turned the color of bruised flesh. You are completely powerless. And yet, in that powerlessness, something extraordinary happens: the boundaries of the self, so carefully maintained in drawing rooms and lecture halls, simply dissolve. You become, for a moment, continuous with the storm itself. This is what Friedrich painted, what Turner chased across the oceans of England, what Delacroix unleashed in surging waves of crimson and gold.</p>
      </div>
    </div>
  </section>

  <!-- ===========================
       Parchment / Manifesto Section
       =========================== -->
  <section id="manifesto" class="section section--parchment">
    <div class="section__container">
      <div class="section__header">
        <p class="section__overline">The Romantic Creed</p>
        <h2 class="section__title">What We Believe</h2>
        <div class="divider"><span class="divider__icon">&#10087;</span></div>
      </div>

      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;">
        <div class="parchment-card">
          <h3 class="parchment-card__title">Emotion is Knowledge</h3>
          <p class="parchment-card__text">What we feel in the presence of a thunderstorm or a mountain dawn is not ignorance dressed as sentiment -- it is a form of understanding that reason alone cannot reach.</p>
        </div>
        <div class="parchment-card">
          <h3 class="parchment-card__title">Nature is Not a Resource</h3>
          <p class="parchment-card__text">The natural world is not raw material awaiting human improvement. It is a vast, autonomous force deserving of reverence, awe, and the humility of those who walk within it.</p>
        </div>
        <div class="parchment-card">
          <h3 class="parchment-card__title">The Individual Voice Matters</h3>
          <p class="parchment-card__text">Against the machinery of systems and institutions, the singular human perspective -- passionate, flawed, irreplaceable -- remains the truest instrument we possess.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===========================
       Footer
       =========================== -->
  <footer class="footer">
    <div class="footer__logo">The Wanderer</div>
    <p class="footer__tagline">Where storm meets solitude</p>
    <ul class="footer__links">
      <li><a href="#">Gallery</a></li>
      <li><a href="#">The Sublime</a></li>
      <li><a href="#">Passage</a></li>
      <li><a href="#">Manifesto</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <div class="footer__rule"></div>
    <p class="footer__copy">&copy; 2026 The Wanderer. Crafted by candlelight and conviction.</p>
  </footer>

</body>
</html>
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.