/* =========================================================
OlgaPhoenix.com — base.css
Shared design system. Mirror of OP-Website-Master-Prompt_v16.md.
If a value changes here, update the master prompt too (and vice versa).
Requires the page to load the fonts:
Includes: design tokens, reset, base typography, shared utilities,
and the canonical site NAV (.op-home-nav) + FOOTER (.op-footer).
See AGENTS.md §6.
========================================================= */
/* ---------- DESIGN TOKENS ---------- */
:root {
/* Colour system (master prompt) */
--color-black: #0d0b08; /* Near-black warm — nav, footer, dark sections */
--color-dark: #1a1714; /* Body / section text */
--color-gold: #b8976a; /* Accent / eyebrow / hover */
--color-ivory: #f5f0e8; /* ALL light backgrounds — never pure #fff */
--color-white: #f5f0e8; /* Alias — never use #ffffff as a background */
--color-eyebrow: rgba(13, 11, 8, 0.75);
--color-body: #1a1714;
--color-divider: rgba(13, 11, 8, 0.15);
--color-placeholder: #c8c4be; /* Image placeholder fill */
/* Font system (master prompt) */
--font-display: 'Cormorant Garamond', serif; /* Hero names, large display, footer brand, Global Reach numbers */
--font-serif: 'Playfair Display', serif; /* Section titles, beliefs, CTA headlines, payoff/quotes */
--font-body: 'Montserrat', sans-serif; /* Body, eyebrows, nav, buttons */
/* Spacing system (master prompt — Three-Level) */
--section-padding: 120px; /* Top AND bottom of every section */
--section-padding-h: 80px; /* Default horizontal padding */
--zone-padding: 48px; /* Between zones within a section */
--inline-padding-lg: 48px; /* Title-to-body / major blocks */
--inline-padding-sm: 28px; /* Between paragraphs */
--eyebrow-margin: 80px; /* Eyebrow to first content element */
/* Eyebrow */
--eyebrow-size: 16px;
--eyebrow-weight: 600;
--eyebrow-spacing: 0.25em;
/* Text widths */
--width-headline: 860px; /* Section titles / headlines */
--width-text: 720px; /* Body, payoff lines, lists, closing lines */
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; } /* clear the sticky nav on anchor jumps */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* ---------- BASE TYPOGRAPHY ---------- */
body {
background: var(--color-ivory);
color: var(--color-body);
font-family: var(--font-body); /* Montserrat */
font-size: 20px;
font-weight: 300;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ---------- SHARED UTILITIES ---------- */
/* Eyebrow — Montserrat 16/600 uppercase, 0.25em tracking */
.u-eyebrow {
font-family: var(--font-body);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
text-transform: uppercase;
letter-spacing: var(--eyebrow-spacing);
color: var(--color-eyebrow);
}
/* Italic emphasis — Playfair italic inside Montserrat body (use sparingly; see master prompt) */
.ital {
font-family: var(--font-serif);
font-style: italic;
}
/* Copyright mark in headlines/titles (Playfair). For Cormorant hero headlines, override per master prompt. */
.rm {
font-size: 0.55em;
vertical-align: super;
letter-spacing: 0;
}
/* Text-width helpers — always centred */
.u-width-headline { max-width: var(--width-headline); margin-left: auto; margin-right: auto; }
.u-width-text { max-width: var(--width-text); margin-left: auto; margin-right: auto; }
/* Image placeholder — fixed pixel height set per use (master prompt) */
.u-img-placeholder {
background: var(--color-placeholder);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(13, 11, 8, 0.45);
}
/* =========================================================
SITE NAV (canonical)
Transparent, overlays the hero. Place the