/* =========================================================================
V'DURA JAY — STRATEGIC VENTURE ARCHITECT
Reference stylesheet (design-accurate static build)
Token values here map 1:1 to the Elementor Global Colors / Fonts in
build-kit/DESIGN-SYSTEM.md
========================================================================= */
/* ---------- Fonts ---------------------------------------------------------
Loaded via Google Fonts in each page's — all three are Google
fonts, so no upload/licensing is needed:
• Arimo — headers + all-caps sub copy (labels/eyebrows)
• DM Sans — body copy (the comp uses Untitled Sans; DM Sans is the web font)
• Cormorant Garamond — stat numbers + the one centred serif heading
Per the designer (Ryan): Myriad Pro is NOT used anywhere. ------------------ */
/* ---------- Design tokens ----------------------------------------------- */
:root {
/* Colour */
--c-ink: #161311; /* near-black warm — dark sections, headings on light */
--c-dark: #2c2521; /* footer / softer dark */
--c-text: #141210; /* body text on light — near-black, matches the design */
--c-muted: #6f675e; /* captions / secondary */
--c-cream: #f6f1e7; /* primary section background */
--c-paper: #ffffff; /* white sections */
--c-accent: #de9337; /* amber accent */
--c-accent-deep: #b56a2e; /* rust — gradient base / hover */
--c-line: rgba(20, 17, 15, 0.22); /* hairlines / inputs on light */
--c-line-dark: rgba(246, 241, 231, 0.28);/* hairlines on dark */
--c-cream-soft: rgba(246, 241, 231, 0.72);/* dimmed text on dark */
/* Type families (all Google fonts) — per designer: Arimo for body + headers
(headers in medium/500), Cormorant for numbers + special headers. */
--f-display: "Arimo", Arial, system-ui, -apple-system, sans-serif; /* headers + all-caps labels */
--f-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* stat numbers + centred serif heading */
--f-body: "Arimo", Arial, system-ui, -apple-system, sans-serif; /* body copy */
/* Type scale (fluid) */
--t-h1: clamp(3rem, 2rem + 3vw, 4.5rem); /* hero 48 → 72 (+50% per Ryan) */
--t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); /* section 28 → 42 */
--t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); /* sub 20 → 26 */
--t-stat: clamp(2.75rem, 1.8rem + 4.6vw, 4.5rem); /* big numbers 44 → 72 */
--t-body: 1.0625rem; /* 17px */
--t-small: 0.9375rem; /* 15px */
--t-label: 0.75rem; /* 12px eyebrow*/
/* Rhythm */
--section-y: clamp(4rem, 2.5rem + 6vw, 8.25rem);
--gutter: clamp(1.25rem, 9vw, 10rem); /* ~9% side margins (per Ryan's margin guide) */
--maxw: 1720px;
--content: 640px; /* readable text column */
}
/* ---------- Reset / base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--f-body);
font-size: var(--t-body);
line-height: 1.68;
color: var(--c-text);
background: var(--c-paper);
text-rendering: optimizeLegibility;
/* Untitled Sans / Myriad Pro ship a single (regular) weight — never let the
browser fake a heavier weight; fall to the nearest real face instead. */
font-synthesis: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
/* ---------- Layout helpers --------------------------------------------- */
.wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.bg-cream { background: var(--c-cream); }
.bg-paper { background: var(--c-paper); }
.bg-ink { background: var(--c-ink); color: var(--c-cream); }
.measure { max-width: var(--content); }
/* design-faithful line breaks: forced on desktop, removed on small screens */
br.brk { display: inline; }
@media (max-width: 768px) { br.brk { display: none; } }
/* ---------- Typography components -------------------------------------- */
.eyebrow {
font-family: var(--f-body);
font-weight: 500;
font-size: var(--t-label);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-text);
margin: 0 0 1.6rem;
}
.bg-ink .eyebrow, .footer .eyebrow { color: var(--c-cream-soft); }
h1, h2, h3 { font-weight: 400; margin: 0; }
.h1 {
font-family: var(--f-display);
font-size: var(--t-h1);
line-height: 1.06;
letter-spacing: -0.018em;
font-weight: 500; /* Arimo Medium for headers (per designer) */
}
.h2 {
font-family: var(--f-display);
font-size: var(--t-h2);
line-height: 1.16;
letter-spacing: -0.012em;
font-weight: 500; /* Arimo Medium */
}
.h2--serif {
font-family: var(--f-serif);
font-weight: 500;
letter-spacing: 0;
font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem);
line-height: 1.12;
}
.lead { font-size: 1.125rem; line-height: 1.6; }
/* ---------- Buttons / links -------------------------------------------- */
.link-underline {
display: inline-block;
font-family: var(--f-body);
font-weight: 500;
font-size: var(--t-label);
letter-spacing: 0.18em;
text-transform: uppercase;
padding-bottom: 0.5rem;
border-bottom: 1px solid currentColor;
transition: color 0.25s, border-color 0.25s, gap 0.25s;
}
.link-underline:hover { color: var(--c-accent); border-color: var(--c-accent); }
.bg-ink .link-underline:hover { color: var(--c-accent); border-color: var(--c-accent); }
/* reset UA chrome when the underline link is a