/* =============================================================
ETERNO ) RAÍZ — Brand Theme
Drop-in stylesheet for brand partners.
A product of Eternity Spirits Inc.
HOW TO USE
1. Load the fonts (in your , before this file):
2. Link this file:
3. Use the CSS variables (var(--eterno-gold), etc.) and the
.eterno-* helper classes below anywhere you present the brand.
All tokens are namespaced --eterno-* so they will not collide
with your own design system.
============================================================= */
:root {
/* --- Backgrounds (deep midnight navy) --- */
--eterno-bg: #0a1628; /* primary background */
--eterno-bg-darker: #060d1a; /* section contrast */
--eterno-bg-darkest: #040a14; /* edges / vignette */
--eterno-bg-card: #0d1a2d; /* raised surfaces / cards */
--eterno-blue-accent: #1a2d4a; /* label navy / accents */
/* --- Gold (the metallic accent) --- */
--eterno-gold: #c39e6a; /* primary gold */
--eterno-gold-light: #d4b78a; /* highlights / hovers */
--eterno-gold-dark: #a17d4a; /* shadows / gradients */
/* --- Cream & text --- */
--eterno-cream: #f5f0e8; /* headings on dark */
--eterno-cream-dark: #e8dfd0; /* sub-headings */
--eterno-text: #e8e4dc; /* body copy on dark */
--eterno-text-muted: #ab9c84; /* warm muted (captions) */
/* --- Lines --- */
--eterno-border: rgba(195, 158, 106, 0.20);
--eterno-border-soft: rgba(195, 158, 106, 0.10);
/* --- Signature gradients --- */
--eterno-gold-gradient: linear-gradient(135deg, #d4b78a 0%, #c39e6a 50%, #a17d4a 100%);
--eterno-hairline: linear-gradient(90deg, transparent, #c39e6a, transparent);
/* --- Type --- */
--eterno-font-heading: 'Marcellus', Georgia, 'Times New Roman', serif;
--eterno-font-display: 'Cormorant Garamond', Georgia, serif;
--eterno-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* =============================================================
Base surface — apply to a wrapper you want "on brand"
============================================================= */
.eterno {
background-color: var(--eterno-bg);
color: var(--eterno-text);
font-family: var(--eterno-font-body);
font-weight: 300;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* =============================================================
Typography
============================================================= */
.eterno h1, .eterno h2, .eterno h3, .eterno .eterno-heading {
font-family: var(--eterno-font-heading);
font-weight: 400;
color: var(--eterno-cream);
letter-spacing: 0.01em;
line-height: 1.18;
}
.eterno h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.eterno h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.eterno h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
/* Elegant italic lead — Cormorant Garamond */
.eterno-lead {
font-family: var(--eterno-font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.25rem, 2.4vw, 1.7rem);
color: var(--eterno-cream-dark);
line-height: 1.5;
}
/* Small uppercase label / eyebrow — Montserrat */
.eterno-label {
font-family: var(--eterno-font-body);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--eterno-gold);
}
/* Big display number (stats) — Cormorant */
.eterno-stat-num {
font-family: var(--eterno-font-display);
font-weight: 600;
font-size: clamp(2.6rem, 4.5vw, 3.6rem);
line-height: 1;
color: var(--eterno-gold);
text-shadow: 0 2px 24px rgba(195, 158, 106, 0.25);
}
/* Gold text (use sparingly, for emphasis) */
.eterno-gold-text {
background: var(--eterno-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--eterno-gold);
}
/* =============================================================
Hairline divider (the recurring gold rule)
============================================================= */
.eterno-divider {
height: 1px;
border: 0;
background: var(--eterno-hairline);
margin: 2.5rem auto;
max-width: 320px;
}
/* =============================================================
Buttons
============================================================= */
.eterno-btn {
display: inline-block;
font-family: var(--eterno-font-body);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
padding: 0.95rem 2.4rem;
border-radius: 2px;
cursor: pointer;
transition: all 0.35s ease;
}
/* Primary — gold fill */
.eterno-btn--primary {
background: var(--eterno-gold-gradient);
color: var(--eterno-bg);
border: 1px solid var(--eterno-gold);
}
.eterno-btn--primary:hover {
filter: brightness(1.08);
box-shadow: 0 8px 30px rgba(195, 158, 106, 0.28);
}
/* Secondary — gold outline */
.eterno-btn--ghost {
background: transparent;
color: var(--eterno-gold);
border: 1px solid var(--eterno-gold);
}
.eterno-btn--ghost:hover {
background: var(--eterno-gold);
color: var(--eterno-bg);
}
/* =============================================================
Card
============================================================= */
.eterno-card {
background: var(--eterno-bg-card);
border: 1px solid var(--eterno-border);
border-radius: 4px;
padding: 2rem;
}
/* =============================================================
Brand name treatment
Render the product name with the crescent-moon glyph in gold:
ETERNO ) RAÍZ
============================================================= */
.eterno-name {
font-family: var(--eterno-font-heading);
letter-spacing: 0.08em;
color: var(--eterno-cream);
}
.eterno-name i {
font-style: normal;
color: var(--eterno-gold);
padding: 0 0.15em;
}