/* ==========================================================================
ENERGENCIA — DESIGN TOKENS
The brand book, made machine-readable. Every page reads from this file.
Change a value here and the whole site updates.
========================================================================== */
/* Fonts (free, from Google Fonts). Loaded in each HTML :
*/
:root {
/* ---- Colour ---- */
--white: #FEFDFA; /* Ground. Dominant, ~60% of every screen. */
--ink: #14110D; /* Text and the mark. */
--yellow: #FFD400; /* Signal. The brand hit. Never for long text. */
--klein: #1400F0; /* Anchor. Sits opposite yellow. Buttons, fields. */
--pink: #FB3F9C; /* Spark. Sparing, one accent per screen. */
--grey: #8C8478; /* Muted UI text, captions. */
--line: #E7E1D3; /* Hairlines, borders. */
/* ---- Type families ---- */
--font-display: 'Jost', sans-serif; /* Wordmark + headlines. CAPS only for the wordmark. */
--font-body: 'Outfit', sans-serif; /* Headings, body, UI. */
--font-mono: 'DM Mono', monospace; /* Labels, prices, nav meta, captions. */
/* ---- Type scale (mobile-first; fluid where useful) ---- */
--fs-hero: clamp(2.6rem, 8vw, 5rem); /* Hero headline (Outfit 600) */
--fs-h1: clamp(2rem, 5vw, 3.25rem);
--fs-h2: clamp(1.5rem, 3.5vw, 2.25rem);
--fs-h3: 1.375rem;
--fs-body: 1.0625rem; /* ~17px, Outfit 300/400 */
--fs-small: 0.9375rem;
--fs-label: 0.75rem; /* DM Mono, letter-spaced, uppercase */
--lh-body: 1.55;
--lh-tight: 1.08;
--track-label: 0.16em;
--track-wordmark: 0.06em; /* wordmark letter-spacing */
/* ---- Spacing ---- */
--s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem;
--s-5: 4rem; --s-6: 6rem; --s-section: clamp(4rem, 10vw, 8rem);
--maxw: 1200px; /* content max width */
--pad-x: clamp(1.25rem, 5vw, 5rem); /* page side padding */
/* ---- Shape ---- */
--radius: 6px;
--radius-lg: 10px;
--border: 1px solid var(--line);
}
/* ==========================================================================
BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--font-body);
font-weight: 300;
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-body); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 var(--s-2); max-width: 62ch; }
a { color: inherit; }
img { max-width: 100%; display: block; }
/* Layout helpers */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--s-section); }
/* ---- Labels / meta (DM Mono) ---- */
.label {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--grey);
}
/* ==========================================================================
WORDMARK & LOCKUP
Rule: wordmark cap height = 1/3 of the mark height. Clear space = 1 cap height.
========================================================================== */
.wordmark {
font-family: var(--font-display);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--track-wordmark);
color: var(--ink);
line-height: 0.9;
}
/* Lockups: keep the mark ~3x the wordmark cap height.
Practical starting sizes (tune per placement):
- inline: mark height ~2x cap -> e.g. mark 48px, wordmark 1.5rem
- stacked: mark height ~3x cap -> e.g. mark 96px, wordmark 2rem */
.lockup { display: flex; align-items: center; gap: 0.7em; text-decoration: none; }
.lockup--stacked { flex-direction: column; align-items: center; gap: 0.5em; }
.lockup--offset { flex-direction: column; align-items: flex-start; gap: 0.5em; }
.lockup img { height: auto; }
/* ==========================================================================
BUTTONS (from the brand book "in use" page)
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 0.5em;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
text-decoration: none;
padding: 0.85em 1.4em;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--klein); color: var(--white); } /* default CTA */
.btn--signal { background: var(--ink); color: var(--yellow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--spark { background: var(--pink); color: var(--white); } /* use sparingly */
/* ==========================================================================
READABILITY GUARDRAILS (do not break these)
- Long text is only ever --ink on --white.
- On --yellow, text is --ink, never white.
- Never set body copy on --klein or --pink (headings/short labels only).
- One accent colour per screen.
========================================================================== */