/*
* Elareon Group — Base Stylesheet
* Import this file on every page of the site.
* Source of truth: design-system.md
*
* Google Fonts — include this in every page :
*
*/
/* ─────────────────────────────────────────────
DESIGN TOKENS
───────────────────────────────────────────── */
:root {
/* Colors */
--black: #0a0a0a;
--dark: #111111;
--card: #161616;
--border: #2a2a2a;
--accent: #c8a96e;
--accent-dim: rgba(200, 169, 110, 0.12);
--accent-subtle: rgba(200, 169, 110, 0.06);
--accent-glow: rgba(200, 169, 110, 0.25);
--white: #f0ede8;
--text: #d8d4cc;
--muted: #999999;
/* Typography — Families */
--font-display: 'Bebas Neue', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'DM Mono', monospace;
/* Typography — Scale */
--text-display: 96px;
--text-h1: 64px;
--text-h2: 48px;
--text-h3: 32px;
--text-h4: 22px;
--text-stat: 56px;
--text-body-lg: 18px;
--text-body: 16px;
--text-body-sm: 14px;
--text-label: 13px;
--text-eyebrow: 12px;
--text-caption: 12px;
--text-micro: 12px;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
--space-10: 64px;
--space-12: 80px;
--space-16: 96px;
/* Borders */
--border-default: 1px solid var(--border);
--border-accent: 1px solid var(--accent);
--border-dim: 1px solid var(--accent-glow);
--border-left-accent: 3px solid var(--accent);
/* Grid background pattern */
--grid-size: 20px;
--grid-color: rgba(200, 169, 110, 0.03);
}
/* ─────────────────────────────────────────────
RESET
───────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ─────────────────────────────────────────────
BASE
───────────────────────────────────────────── */
html {
font-size: 16px;
background: var(--black);
color: var(--text);
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.6;
background: var(--black);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
/* ─────────────────────────────────────────────
BACKGROUND TEXTURE
Apply .bg-texture to any full-page wrapper
that should carry the ambient gradient + grid.
───────────────────────────────────────────── */
.bg-texture {
position: relative;
}
.bg-texture::before {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(ellipse 80% 40% at 50% -10%, rgba(200,169,110,0.07) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 100% 100%, rgba(200,169,110,0.04) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.bg-texture::after {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
pointer-events: none;
z-index: 0;
}
.bg-texture > * {
position: relative;
z-index: 1;
}
/* ─────────────────────────────────────────────
TYPOGRAPHY — HEADINGS
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
color: var(--white);
line-height: 0.95;
letter-spacing: 0.02em;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); letter-spacing: 0.04em; }
h3 { font-size: var(--text-h3); letter-spacing: 0.06em; line-height: 1.0; }
h4 { font-size: var(--text-h4); letter-spacing: 0.08em; line-height: 1.1; }
/* Accent word inside a headline */
h1 span,
h2 span,
h3 span,
.headline-accent {
color: var(--accent);
}
/* ─────────────────────────────────────────────
TYPOGRAPHY — BODY
───────────────────────────────────────────── */
p {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--text);
line-height: 1.6;
}
p.lead {
font-size: var(--text-body-lg);
font-weight: 300;
line-height: 1.65;
color: var(--text);
}
small, .text-sm {
font-size: var(--text-body-sm);
}
/* ─────────────────────────────────────────────
TYPOGRAPHY — MONOSPACE ELEMENTS
───────────────────────────────────────────── */
/* Eyebrow label above a heading */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-eyebrow);
font-weight: 400;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.eyebrow::after {
content: '';
display: block;
height: 1px;
width: 40px;
background: var(--accent);
opacity: 0.4;
}
/* Section separator label (muted variant) */
.section-label {
font-family: var(--font-mono);
font-size: var(--text-eyebrow);
font-weight: 400;
letter-spacing: 0.2em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
/* Data/technical label */
.label {
font-family: var(--font-mono);
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
}
.label::before {
content: '▸';
font-size: 12px;
}
/* Caption / metadata */
.caption {
font-family: var(--font-mono);
font-size: var(--text-caption);
letter-spacing: 0.12em;
color: var(--muted);
text-transform: uppercase;
}
/* ─────────────────────────────────────────────
LINKS
───────────────────────────────────────────── */
a {
color: var(--accent);
text-decoration: none;
transition: opacity 0.15s ease;
}
a:hover {
opacity: 0.75;
}
/* ─────────────────────────────────────────────
CARDS
───────────────────────────────────────────── */
.card {
background: var(--card);
border: var(--border-default);
padding: var(--space-4) var(--space-3);
}
.card-featured {
background: var(--accent-subtle);
border: var(--border-accent);
padding: var(--space-4) var(--space-3);
}
/* ─────────────────────────────────────────────
CALLOUT STRIP
───────────────────────────────────────────── */
.callout {
background: var(--accent-dim);
border: var(--border-dim);
border-left: var(--border-left-accent);
padding: var(--space-4) var(--space-5);
font-size: var(--text-body-sm);
color: var(--white);
font-style: italic;
font-weight: 300;
line-height: 1.5;
}
.callout strong {
font-style: normal;
font-weight: 500;
color: var(--accent);
}
/* ─────────────────────────────────────────────
STAT BLOCK
───────────────────────────────────────────── */
.stat {
background: var(--card);
border: var(--border-default);
padding: var(--space-4) var(--space-5);
text-align: center;
}
.stat-value {
font-family: var(--font-display);
font-size: var(--text-stat);
color: var(--accent);
letter-spacing: 0.04em;
line-height: 1;
margin-bottom: var(--space-1);
}
.stat-label {
font-family: var(--font-mono);
font-size: var(--text-micro);
letter-spacing: 0.12em;
color: var(--muted);
text-transform: uppercase;
line-height: 1.3;
}
/* ─────────────────────────────────────────────
BADGE
───────────────────────────────────────────── */
.badge {
font-family: var(--font-mono);
font-size: var(--text-micro);
letter-spacing: 0.12em;
color: var(--black);
background: var(--accent);
padding: 3px 8px;
text-transform: uppercase;
display: inline-block;
align-self: flex-start;
}
/* ─────────────────────────────────────────────
LISTS
───────────────────────────────────────────── */
/* Dash-marker list (used in feature/content cards) */
ul.list-dash {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
ul.list-dash li {
font-size: var(--text-body-sm);
color: var(--text);
display: flex;
align-items: flex-start;
gap: 6px;
line-height: 1.45;
}
ul.list-dash li::before {
content: '—';
color: var(--accent);
opacity: 0.6;
font-size: 12px;
flex-shrink: 0;
margin-top: 1px;
}
/* Check-marker list (used in pricing) */
ul.list-check {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
ul.list-check li {
font-size: var(--text-body-sm);
color: var(--text);
display: flex;
align-items: flex-start;
gap: 5px;
line-height: 1.4;
}
ul.list-check li::before {
content: '✓';
color: var(--accent);
font-size: 12px;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────
DIVIDER
───────────────────────────────────────────── */
hr, .divider {
border: none;
border-top: var(--border-default);
margin: var(--space-3) 0;
}
/* ─────────────────────────────────────────────
HEADER
───────────────────────────────────────────── */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
border-bottom: var(--border-default);
}
.logo-block {
display: flex;
align-items: center;
gap: 10px;
}
.logo-img {
height: 32px;
width: auto;
opacity: 0.92;
}
.logo-divider {
width: 1px;
height: 32px;
background: var(--border);
flex-shrink: 0;
}
.brand-name {
display: flex;
flex-direction: column;
gap: 2px;
}
.brand-label {
font-family: var(--font-mono);
font-size: var(--text-micro);
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
}
.brand-title {
font-family: var(--font-display);
font-size: 20px;
letter-spacing: 0.06em;
color: var(--white);
line-height: 1;
}
/* ─────────────────────────────────────────────
FOOTER
───────────────────────────────────────────── */
.site-footer {
padding: var(--space-5) var(--space-6);
border-top: var(--border-default);
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-company {
font-family: var(--font-display);
font-size: 16px;
letter-spacing: 0.1em;
color: var(--white);
}
.footer-tagline {
font-size: var(--text-body-sm);
color: var(--muted);
font-weight: 300;
margin-top: 3px;
}
.footer-contact {
text-align: right;
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-contact a {
font-family: var(--font-mono);
font-size: var(--text-caption);
color: var(--accent);
letter-spacing: 0.05em;
}
.footer-location {
font-family: var(--font-mono);
font-size: var(--text-micro);
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ─────────────────────────────────────────────
LAYOUT UTILITIES
───────────────────────────────────────────── */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.container-narrow {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
@media (max-width: 768px) {
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.grid-3.grid-sm-2,
.grid-4.grid-sm-2 {
grid-template-columns: 1fr 1fr;
}
.site-header,
.site-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.footer-contact {
text-align: left;
}
}
/* ─────────────────────────────────────────────
PRINT STYLES
───────────────────────────────────────────── */
@media print {
.bg-texture::before,
.bg-texture::after {
position: absolute;
}
}