/* =====================================================================
ANTHEMIS COSMETICS — BRAND THEME · "Bronze & Botanica"
A modern, elegant evolution of the Anthemis identity.
Drop this file into any web project:
All values are exposed as CSS custom properties on :root.
===================================================================== */
/* ----- Type (load in ):
------------------------------------------------------------------- */
:root {
/* ---------- BRAND COLORS ---------- */
/* Foundation neutrals — warm, natural, the "paper" of the brand */
--color-porcelain: #FBF8F3; /* base background — warm cream */
--color-stone: #F0EADF; /* secondary surface — soft sand */
--color-linen: #E4DBCB; /* tertiary surface / sand */
--color-border: #DAD0BF; /* hairline borders & dividers */
/* Ink — text & dark grounds (evolved from the wordmark grey) */
--color-ink: #2E2F33; /* primary text, dark sections */
--color-slate: #55575C; /* secondary text (the original wordmark) */
--color-mist: #8A8C90; /* muted captions, placeholders */
/* Bronze — the signature metallic, drawn from the flower-mark */
--color-bronze: #A6845F; /* primary accent / brand signature */
--color-bronze-deep: #86663F; /* solid buttons & links (white text safe) */
--color-champagne: #C8AE8C; /* light bronze — hovers, highlights */
--color-champagne-pale:#EFE2D1;/* tinted fills, hover surfaces */
/* Botanica — earthy olive from the brand photography (sustainability) */
--color-olive: #5E5A3C; /* botanical secondary */
--color-olive-soft: #7C7752; /* lighter olive for accents */
--color-sage-tint: #E6E5DA; /* soft green-grey surface */
/* Functional */
--color-white: #FFFFFF;
--color-success: #5E7B53;
--color-error: #9B4A3C;
/* ---------- SEMANTIC TOKENS ---------- */
--bg-page: var(--color-porcelain);
--bg-surface: var(--color-white);
--bg-subtle: var(--color-stone);
--bg-dark: var(--color-ink);
--text-primary: var(--color-ink);
--text-secondary: var(--color-slate);
--text-muted: var(--color-mist);
--text-on-dark: #F3EDE3;
--accent: var(--color-bronze);
--accent-strong: var(--color-bronze-deep);
--line: var(--color-border);
/* ---------- TYPOGRAPHY ---------- */
--font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
--font-body: "Jost", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
/* Fluid type scale (clamped for responsiveness) */
--fs-display: clamp(3rem, 7vw, 6rem); /* hero */
--fs-h1: clamp(2.4rem, 4.5vw, 3.75rem);
--fs-h2: clamp(1.9rem, 3vw, 2.75rem);
--fs-h3: clamp(1.4rem, 2vw, 1.85rem);
--fs-h4: 1.25rem;
--fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-eyebrow: 0.78rem;
--lh-tight: 1.08;
--lh-snug: 1.3;
--lh-body: 1.7;
/* Tracking — the wide, elegant letter-spacing of the wordmark */
--ls-eyebrow: 0.28em;
--ls-label: 0.16em;
--ls-display: -0.01em;
/* ---------- SPACING (8px base) ---------- */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
--space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
--space-10: 8rem;
/* ---------- RADII ---------- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
/* ---------- SHADOWS (soft, warm-tinted) ---------- */
--shadow-sm: 0 1px 2px rgba(46,47,51,.06), 0 1px 3px rgba(46,47,51,.05);
--shadow-md: 0 4px 16px rgba(72,60,40,.08), 0 2px 6px rgba(72,60,40,.06);
--shadow-lg: 0 18px 50px rgba(72,60,40,.12), 0 6px 18px rgba(72,60,40,.08);
/* ---------- MOTION ---------- */
--ease: cubic-bezier(.22,.61,.36,1);
--dur: .45s;
/* ---------- LAYOUT ---------- */
--maxw: 1200px;
--gutter: clamp(1.25rem, 5vw, 4rem);
}
/* =====================================================================
BASE ELEMENT STYLES (optional — useful starting point)
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
color: var(--text-primary);
margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--color-bronze); }
/* ----- Reusable brand classes ----- */
.eyebrow {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--accent);
}
.lead { font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.55; }
.btn {
display: inline-flex; align-items: center; gap: .6em;
font-family: var(--font-body); font-weight: 500;
font-size: var(--fs-small); letter-spacing: var(--ls-label);
text-transform: uppercase;
padding: .9em 1.9em; border-radius: var(--radius-pill);
border: 1px solid transparent; cursor: pointer;
transition: all var(--dur) var(--ease);
}
.btn-primary { background: var(--color-bronze-deep); color: #fff; }
.btn-primary:hover { background: var(--color-ink); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--color-bronze); color: var(--color-bronze-deep); }
/* Thin rule used as a brand flourish */
.rule { width: 56px; height: 1px; background: var(--color-bronze); border: 0; }