Witchcore is a mystical, nature-rooted aesthetic influenced by modern witchcraft, herbalism, occultism, and the reclamation of feminine power. It draws from the visual language of apothecary shops, moonlit forests, dried-herb bundles, and candlelit altars to create an atmosphere steeped in ancient wisdom and quiet enchantment. Unlike purely gothic aesthetics that lean into horror, Witchcore centers on connection to the natural world – moon phases, crystals, botanical remedies, and the cyclical rhythms of the earth – wrapping them in a dark, moody visual palette of deep purples, forest greens, and shadowed blacks.
In web and digital design, Witchcore translates into rich dark backgrounds, aged parchment textures, botanical line-art illustrations, celestial iconography (moons, stars, planetary glyphs), and typography that references medieval manuscripts, Victorian apothecary labels, and hand-inked grimoires. The aesthetic favors layered depth – think candle-glow gradients bleeding through darkness, translucent smoke overlays, and subtle grain textures that evoke old paper or dried leaves. Gold and copper metallic accents punctuate the dark palette, functioning as alchemical highlights that suggest transformation and hidden knowledge.
The mood Witchcore pursues is one of intimate mystery: the quiet corner of a herbalist’s workshop, a moonlit clearing ringed with standing stones, the interior of a cottage where dried lavender hangs from exposed beams and crystals catch the last light of dusk. It is empowering rather than frightening, contemplative rather than chaotic. Layouts tend toward centered, vertical compositions with generous negative space that lets the darkness breathe, interrupted by carefully placed botanical ornaments, celestial dividers, and softly glowing call-to-action elements. Every design decision should feel intentional and slightly arcane, as though the interface itself holds secrets waiting to be discovered.
The Witchcore palette is built on a foundation of darkness punctuated by the muted, earthy tones of a forest apothecary. Deep blacks and purples establish the base atmosphere, while mossy greens and herbal sage tones connect to the natural world. Metallic golds and coppers serve as alchemical highlights, and muted oranges and burgundies add warmth reminiscent of candlelight and dried autumn herbs.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Midnight Void | #0D0D12 |
Primary background, deepest dark |
| Cauldron Black | #1A1A24 |
Card backgrounds, elevated surfaces |
| Nightshade Purple | #2D1B3D |
Secondary background, section contrast |
| Belladonna | #6B3A6B |
Primary accent, interactive elements |
| Wisteria Haze | #9B7BB8 |
Lighter purple accent, hover states |
| Dried Sage | #7A8B6F |
Nature accent, secondary interactive |
| Forest Moss | #4A5E3A |
Dark green accent, borders |
| Apothecary Gold | #C9A84C |
Metallic highlight, emphasis, icons |
| Tarnished Copper | #A0714F |
Warm metallic, secondary highlight |
| Parchment Glow | #E8DCC8 |
Primary text on dark backgrounds |
| Bone White | #D4C8B0 |
Secondary text, muted labels |
| Candle Flame | #D4883A |
Warm glow accents, notifications |
| Dried Blood | #6E2C2C |
Error states, danger, deep warmth |
| Moonstone Silver | #B8BCC8 |
Tertiary text, subtle borders |
| Absinthe Green | #8FB87B |
Success states, herbal highlights |
:root {
--wc-void: #0D0D12;
--wc-cauldron: #1A1A24;
--wc-nightshade: #2D1B3D;
--wc-belladonna: #6B3A6B;
--wc-wisteria: #9B7BB8;
--wc-sage: #7A8B6F;
--wc-moss: #4A5E3A;
--wc-gold: #C9A84C;
--wc-copper: #A0714F;
--wc-parchment: #E8DCC8;
--wc-bone: #D4C8B0;
--wc-flame: #D4883A;
--wc-blood: #6E2C2C;
--wc-moonstone: #B8BCC8;
--wc-absinthe: #8FB87B;
}
Witchcore typography draws from medieval manuscripts, Victorian apothecary labels, and hand-inked grimoires. Heading fonts should feel archaic, ornate, or hand-lettered, while body text remains readable with a warm serif character. Decorative text can lean into blackletter or script styles for labels, quotes, and atmospheric detail.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Cinzel | 400, 500, 600, 700 | Primary headings; inscriptional Roman capitals with an ancient, carved quality | Cinzel |
| Cinzel Decorative | 400, 700 | Display headings, hero titles; ornamental variant for maximum impact | Cinzel Decorative |
| EB Garamond | 400, 500, 600, 700 | Body text; elegant old-style serif with excellent readability | EB Garamond |
| Libre Baskerville | 400, 700 | Alternate body text; warm, sturdy serif with classic proportions | Libre Baskerville |
| MedievalSharp | 400 | Decorative labels, section markers; blackletter-influenced uncial | MedievalSharp |
| Cormorant SC | 300, 400, 500, 600, 700 | Small caps for labels, navigation, meta text; refined and antiquarian | Cormorant SC |
| Heading | Body | Vibe |
|---|---|---|
| Cinzel Decorative 700 | EB Garamond 400 | Ancient grimoire, inscribed and scholarly |
| Cinzel 600 | Libre Baskerville 400 | Carved stone meets classic bookwork |
| MedievalSharp 400 | EB Garamond 400 | Medieval manuscript, herbalist’s journal |
| Cormorant SC 500 | EB Garamond 400 | Refined apothecary catalog, specimen labels |
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&family=EB+Garamond:wght@400;500;600&family=Cormorant+SC:wght@400;500;600&display=swap');
body {
font-family: 'EB Garamond', 'Georgia', serif;
font-size: 1.1rem;
line-height: 1.8;
color: #E8DCC8;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Cinzel', 'Times New Roman', serif;
font-weight: 600;
letter-spacing: 0.06em;
color: #C9A84C;
}
h1 {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-weight: 700;
}
.label, .meta {
font-family: 'Cormorant SC', serif;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.85rem;
color: #B8BCC8;
}
.witch-card {
background: #1A1A24;
border: 1px solid rgba(201, 168, 76, 0.15);
border-radius: 4px;
padding: 32px;
position: relative;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(201, 168, 76, 0.08);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.witch-card:hover {
border-color: rgba(201, 168, 76, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(201, 168, 76, 0.12);
}
.witch-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #C9A84C, transparent);
}
.witch-card::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #6B3A6B, transparent);
}
.witch-button {
background: linear-gradient(135deg, #6B3A6B 0%, #4A2A4A 100%);
color: #E8DCC8;
border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: 2px;
padding: 12px 32px;
font-family: 'Cormorant SC', serif;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.witch-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(201, 168, 76, 0.1),
transparent
);
transition: left 0.5s ease;
}
.witch-button:hover {
background: linear-gradient(135deg, #7D4A7D 0%, #5A3A5A 100%);
border-color: rgba(201, 168, 76, 0.5);
box-shadow: 0 0 20px rgba(107, 58, 107, 0.3);
}
.witch-button:hover::before {
left: 100%;
}
.witch-nav {
background: rgba(13, 13, 18, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(201, 168, 76, 0.1);
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.witch-nav .logo {
font-family: 'Cinzel Decorative', serif;
font-size: 1.2rem;
color: #C9A84C;
letter-spacing: 0.08em;
text-decoration: none;
}
.witch-nav a {
font-family: 'Cormorant SC', serif;
font-size: 0.9rem;
font-weight: 500;
color: #B8BCC8;
text-decoration: none;
letter-spacing: 0.12em;
padding: 8px 16px;
transition: color 0.3s ease;
position: relative;
}
.witch-nav a:hover {
color: #C9A84C;
}
.witch-nav a::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: #C9A84C;
transition: width 0.3s ease;
}
.witch-nav a:hover::after {
width: 60%;
}
.witch-hero {
min-height: 100vh;
background: radial-gradient(ellipse at center bottom, #2D1B3D 0%, #0D0D12 70%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 40px;
position: relative;
overflow: hidden;
}
.witch-hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.witch-hero h1 {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
color: #C9A84C;
margin-bottom: 16px;
text-shadow: 0 0 40px rgba(201, 168, 76, 0.2);
}
.witch-hero .subtitle {
font-family: 'EB Garamond', serif;
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: #B8BCC8;
max-width: 560px;
line-height: 1.8;
margin-bottom: 40px;
}
.witch-hero .moon-phases {
font-size: 1.8rem;
letter-spacing: 0.6em;
color: #9B7BB8;
margin-bottom: 32px;
opacity: 0.7;
}
.candle-glow {
position: relative;
}
.candle-glow::after {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
background: radial-gradient(
circle,
rgba(212, 136, 58, 0.15) 0%,
rgba(212, 136, 58, 0.05) 40%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
animation: flicker 3s ease-in-out infinite alternate;
}
@keyframes flicker {
0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
33% { opacity: 0.85; transform: translateX(-50%) scale(0.97); }
66% { opacity: 0.95; transform: translateX(-50%) scale(1.02); }
}
.parchment-bg {
background-color: #1A1A24;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}
/* Alternative pure CSS grain */
.dark-grain {
background-color: #0D0D12;
position: relative;
}
.dark-grain::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-conic-gradient(
rgba(232, 220, 200, 0.02) 0% 25%,
transparent 0% 50%
);
background-size: 4px 4px;
pointer-events: none;
}
.celestial-divider {
text-align: center;
margin: 48px 0;
color: #9B7BB8;
font-size: 1.2rem;
letter-spacing: 0.4em;
opacity: 0.5;
position: relative;
}
.celestial-divider::before {
content: '\25CF \263E \25CB \263D \25CF';
/* Filled circle, waning crescent, empty circle, waxing crescent, filled circle */
}
.celestial-divider::after {
content: '';
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(155, 123, 184, 0.2), transparent);
z-index: -1;
}
#FFFFFF) for text or backgrounds; use parchment (#E8DCC8) or bone (#D4C8B0) instead| Aesthetic | Relationship |
|---|---|
| Cottagecore | Shares the emphasis on herbs, nature, and handmade craft, but Cottagecore is light and pastoral where Witchcore is dark and mystical |
| Dark Academia | Both embrace antiquarian typography and scholarly depth, but Dark Academia centers on literature and institutions while Witchcore centers on nature and occultism |
| Goblincore | Shares the love of moss, mushrooms, and forest floor treasures, but Goblincore is whimsical and chaotic where Witchcore is reverent and intentional |
| Gothic | Both use dark palettes and archaic references, but Gothic leans architectural and dramatic while Witchcore leans botanical and spiritual |
| Dreamcore | Both create atmospheric, liminal moods, but Dreamcore is surreal and disorienting while Witchcore is grounded in natural symbolism |
| Art Nouveau | Shares flowing organic forms and botanical motifs, but Art Nouveau is ornamental and light while Witchcore is dark and mystical |
| Medievalcore | Both reference pre-modern aesthetics, manuscripts, and pre-industrial craft; Medievalcore is broader while Witchcore focuses on the occult and herbal traditions |
| Cybersigilism | Shares occult symbolism and dark palettes, but Cybersigilism is digital, techno-tribal, and body-focused while Witchcore is organic and nature-rooted |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Witchcore Layout</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+SC:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ========================================
WITCHCORE - Quick-Start Template
======================================== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--wc-void: #0D0D12;
--wc-cauldron: #1A1A24;
--wc-nightshade: #2D1B3D;
--wc-belladonna: #6B3A6B;
--wc-wisteria: #9B7BB8;
--wc-sage: #7A8B6F;
--wc-moss: #4A5E3A;
--wc-gold: #C9A84C;
--wc-copper: #A0714F;
--wc-parchment: #E8DCC8;
--wc-bone: #D4C8B0;
--wc-flame: #D4883A;
--wc-blood: #6E2C2C;
--wc-moonstone: #B8BCC8;
--wc-absinthe: #8FB87B;
}
body {
font-family: 'EB Garamond', Georgia, serif;
font-size: 1.1rem;
line-height: 1.8;
color: var(--wc-parchment);
background-color: var(--wc-void);
-webkit-font-smoothing: antialiased;
}
/* --- Noise Overlay --- */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: repeating-conic-gradient(
rgba(232, 220, 200, 0.015) 0% 25%,
transparent 0% 50%
);
background-size: 4px 4px;
pointer-events: none;
z-index: 9999;
}
/* --- Navigation --- */
.nav {
background: rgba(13, 13, 18, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(201, 168, 76, 0.1);
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.nav-logo {
font-family: 'Cinzel Decorative', serif;
font-size: 1.15rem;
color: var(--wc-gold);
text-decoration: none;
letter-spacing: 0.08em;
}
.nav-links {
display: flex;
gap: 8px;
list-style: none;
}
.nav-links a {
font-family: 'Cormorant SC', serif;
font-size: 0.88rem;
font-weight: 500;
color: var(--wc-moonstone);
text-decoration: none;
letter-spacing: 0.12em;
padding: 8px 16px;
transition: color 0.3s ease;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: var(--wc-gold);
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(--wc-gold);
}
.nav-links a:hover::after {
width: 60%;
}
/* --- Hero Section --- */
.hero {
min-height: 100vh;
background: radial-gradient(ellipse at center bottom, var(--wc-nightshade) 0%, var(--wc-void) 70%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero-moon {
font-size: 1.8rem;
letter-spacing: 0.6em;
color: var(--wc-wisteria);
margin-bottom: 32px;
opacity: 0.6;
}
.hero h1 {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 700;
color: var(--wc-gold);
margin-bottom: 20px;
text-shadow: 0 0 40px rgba(201, 168, 76, 0.15);
letter-spacing: 0.06em;
}
.hero p {
font-family: 'EB Garamond', serif;
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
color: var(--wc-bone);
max-width: 540px;
line-height: 1.9;
margin-bottom: 40px;
}
.hero-cta {
display: inline-block;
background: linear-gradient(135deg, var(--wc-belladonna) 0%, #4A2A4A 100%);
color: var(--wc-parchment);
border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: 2px;
padding: 14px 40px;
font-family: 'Cormorant SC', serif;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.hero-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.1), transparent);
transition: left 0.5s ease;
}
.hero-cta:hover {
border-color: rgba(201, 168, 76, 0.5);
box-shadow: 0 0 24px rgba(107, 58, 107, 0.25);
}
.hero-cta:hover::before {
left: 100%;
}
/* --- Celestial Divider --- */
.divider {
text-align: center;
margin: 56px 0;
position: relative;
}
.divider span {
font-size: 1.1rem;
letter-spacing: 0.5em;
color: var(--wc-wisteria);
opacity: 0.45;
position: relative;
z-index: 1;
background: var(--wc-void);
padding: 0 20px;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(155, 123, 184, 0.2), transparent);
}
/* --- Container --- */
.container {
max-width: 860px;
margin: 0 auto;
padding: 60px 24px;
}
/* --- Section Title --- */
.section-title {
text-align: center;
margin-bottom: 48px;
}
.section-title .label {
font-family: 'Cormorant SC', serif;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--wc-wisteria);
text-transform: uppercase;
margin-bottom: 12px;
display: block;
}
.section-title h2 {
font-family: 'Cinzel', serif;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 600;
color: var(--wc-gold);
letter-spacing: 0.05em;
}
/* --- Card Grid --- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
margin-bottom: 48px;
}
.card {
background: var(--wc-cauldron);
border: 1px solid rgba(201, 168, 76, 0.12);
border-radius: 4px;
padding: 32px 28px;
position: relative;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
border-color: rgba(201, 168, 76, 0.28);
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--wc-gold), transparent);
}
.card-icon {
font-size: 1.8rem;
margin-bottom: 16px;
display: block;
}
.card h3 {
font-family: 'Cinzel', serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--wc-gold);
margin-bottom: 12px;
letter-spacing: 0.04em;
}
.card p {
font-size: 1rem;
color: var(--wc-bone);
line-height: 1.75;
}
/* --- Featured Section (Herb of the Moon) --- */
.featured {
background: linear-gradient(180deg, rgba(45, 27, 61, 0.3) 0%, rgba(13, 13, 18, 0) 100%);
border: 1px solid rgba(155, 123, 184, 0.1);
border-radius: 4px;
padding: 48px 40px;
text-align: center;
position: relative;
margin-bottom: 48px;
}
.featured::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--wc-wisteria), var(--wc-gold), var(--wc-wisteria), transparent);
}
.featured .label {
font-family: 'Cormorant SC', serif;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--wc-moonstone);
text-transform: uppercase;
margin-bottom: 16px;
display: block;
}
.featured h3 {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--wc-gold);
margin-bottom: 8px;
}
.featured .botanical {
font-family: 'EB Garamond', serif;
font-style: italic;
color: var(--wc-sage);
margin-bottom: 20px;
display: block;
}
.featured p {
max-width: 520px;
margin: 0 auto;
color: var(--wc-bone);
line-height: 1.85;
}
/* --- Quote / Incantation --- */
.incantation {
text-align: center;
padding: 40px 32px;
margin: 48px 0;
position: relative;
}
.incantation blockquote {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.3rem;
color: var(--wc-wisteria);
line-height: 1.8;
max-width: 500px;
margin: 0 auto 16px;
}
.incantation cite {
font-family: 'Cormorant SC', serif;
font-size: 0.82rem;
letter-spacing: 0.15em;
color: var(--wc-moonstone);
font-style: normal;
}
.incantation::before,
.incantation::after {
content: '';
position: absolute;
left: 25%;
right: 25%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.15), transparent);
}
.incantation::before { top: 0; }
.incantation::after { bottom: 0; }
/* --- Footer --- */
.footer {
background: var(--wc-cauldron);
border-top: 1px solid rgba(201, 168, 76, 0.08);
padding: 48px 40px 32px;
text-align: center;
margin-top: 80px;
}
.footer-sigil {
font-size: 1.6rem;
color: var(--wc-wisteria);
opacity: 0.4;
margin-bottom: 20px;
letter-spacing: 0.4em;
}
.footer-links {
display: flex;
justify-content: center;
gap: 32px;
list-style: none;
margin-bottom: 24px;
}
.footer-links a {
font-family: 'Cormorant SC', serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--wc-moonstone);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--wc-gold);
}
.footer-copy {
font-size: 0.85rem;
color: rgba(184, 188, 200, 0.35);
}
/* --- Candle Glow Utility --- */
.candle-glow {
position: relative;
}
.candle-glow::after {
content: '';
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(212, 136, 58, 0.12) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: flicker 3s ease-in-out infinite alternate;
}
@keyframes flicker {
0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
33% { opacity: 0.82; transform: translateX(-50%) scale(0.96); }
66% { opacity: 0.93; transform: translateX(-50%) scale(1.03); }
}
/* --- Responsive --- */
@media (max-width: 768px) {
.nav {
padding: 12px 20px;
flex-direction: column;
gap: 12px;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
}
.hero {
min-height: 80vh;
padding: 60px 20px;
}
.container {
padding: 40px 16px;
}
.card-grid {
grid-template-columns: 1fr;
}
.featured {
padding: 32px 20px;
}
.footer-links {
flex-direction: column;
gap: 16px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<a href="#" class="nav-logo">Nightshade Apothecary</a>
<ul class="nav-links">
<li><a href="#herbs">Herbs</a></li>
<li><a href="#remedies">Remedies</a></li>
<li><a href="#moon">Moon Cycles</a></li>
<li><a href="#journal">Journal</a></li>
</ul>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-moon">● ☾ ○ ☽ ●</div>
<h1>Nightshade Apothecary</h1>
<p>Where moonlit herbs and ancient remedies converge.
A sanctuary for those who seek the quiet power
hidden in root, leaf, and celestial rhythm.</p>
<a href="#herbs" class="hero-cta">Enter the Workshop</a>
</section>
<!-- Divider -->
<div class="divider">
<span>✦ ✦ ✦</span>
</div>
<!-- Herb Cards -->
<section class="container" id="herbs">
<div class="section-title">
<span class="label">From the Drying Rack</span>
<h2>Materia Medica</h2>
</div>
<div class="card-grid">
<div class="card">
<span class="card-icon">☘</span>
<h3>Mugwort</h3>
<p>Artemisia vulgaris. Gathered under the waning moon for dream work
and protection. Hang above doorways or steep as a bitter tea
to open the veil between waking and sleeping.</p>
</div>
<div class="card">
<span class="card-icon">❁</span>
<h3>Lavender</h3>
<p>Lavandula angustifolia. Harvested at midsummer when the oils
peak. Used in sachets for restful sleep, bath rituals for
purification, and burned as incense for peace.</p>
</div>
<div class="card">
<span class="card-icon">❀</span>
<h3>Wormwood</h3>
<p>Artemisia absinthium. The bitter herb of visions and boundaries.
Combined with mugwort in smudge bundles or infused in spirits.
Handle with respect and clear intention.</p>
</div>
</div>
</section>
<!-- Divider -->
<div class="divider">
<span>☾ ○ ☽</span>
</div>
<!-- Featured Herb -->
<section class="container" id="moon">
<div class="featured candle-glow">
<span class="label">Herb of the Waning Moon</span>
<h3>Belladonna</h3>
<span class="botanical">Atropa belladonna</span>
<p>Known as deadly nightshade, this powerful plant has been associated
with witchcraft for centuries. Its dark berries and bell-shaped
flowers embody the duality of beauty and danger. In the apothecary,
it is kept behind glass -- respected, studied, never handled lightly.</p>
</div>
</section>
<!-- Incantation -->
<section class="incantation">
<blockquote>
“By root and stem, by leaf and flower,<br>
by moon that marks the witching hour,<br>
what sleeps in soil shall rise to light --<br>
the garden keeps its own at night.”
</blockquote>
<cite>-- Traditional Herbalist's Verse</cite>
</section>
<!-- Divider -->
<div class="divider">
<span>✦ ✦ ✦</span>
</div>
<!-- Remedies Section -->
<section class="container" id="remedies">
<div class="section-title">
<span class="label">From the Workbench</span>
<h2>Remedies & Preparations</h2>
</div>
<div class="card-grid">
<div class="card">
<span class="card-icon">⚗</span>
<h3>Dream Tincture</h3>
<p>Mugwort and chamomile steeped in grain alcohol under a full moon.
Three drops on the tongue before sleep to invite prophetic dreams
and gentle recall upon waking.</p>
</div>
<div class="card">
<span class="card-icon">☄</span>
<h3>Protection Salt</h3>
<p>Black lava salt blended with crushed rosemary, dried sage, and
iron filings. Sprinkled across thresholds and windowsills during
the dark moon to ward and ground.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-sigil">● ☾ ○ ☽ ●</div>
<ul class="footer-links">
<li><a href="#herbs">Herbs</a></li>
<li><a href="#remedies">Remedies</a></li>
<li><a href="#moon">Moon Cycles</a></li>
<li><a href="#journal">Journal</a></li>
</ul>
<p class="footer-copy">Nightshade Apothecary — Crafted under the waning moon</p>
</footer>
</body>
</html>
#E8DCC8 (parchment) or #D4C8B0 (bone) for body text on dark backgrounds; pure white creates harsh contrast that feels clinical rather than mysticalrgba(45, 27, 61, 0.3)) or warm black (rgba(0, 0, 0, 0.4)) rather than cool gray to maintain the atmospheric warmth#C9A84C gold is powerful – reserve it for headings, interactive highlights, and key borders; overuse dilutes its alchemical impact● (full), ☾ (waning), ○ (new), and ☽ (waxing) render natively and make excellent dividers without loading icon fontsflicker animation subtle (3-5% opacity and scale variance); large fluctuations feel distracting rather than atmospheric#1A1A24 card surfaces and #0D0D12 backgrounds