/* ============================================================
YORRO — Colors & Type Foundations
AI consultancy for Flemish & Dutch SMEs.
Brand motif: the amber slash "/" — forward, direct, cutting through.
Fonts: Domine (headlines) + Manrope (body/UI), both Google Fonts.
------------------------------------------------------------
Load fonts in :
============================================================ */
:root {
/* ---- Core palette ---- */
--color-navy: #1C2340; /* primary brand. headlines, nav, primary btn, logo text */
--color-amber: #F0A422; /* accent. the slash, highlights, single page CTA. sparingly */
--color-off-white: #F0EFED; /* default page background. warm, not clinical */
--color-white: #FFFFFF; /* card backgrounds, contrast sections */
/* ---- Extended palette ---- */
--color-navy-body: #3C4566; /* body text. lighter than navy to reduce contrast fatigue */
--color-navy-muted: #7A8099; /* captions, labels, secondary info, placeholders */
--color-amber-tint: #FDF6E8; /* callout / highlight / pricing block backgrounds */
--color-amber-press: #D8921E; /* amber button hover/press (darken ~8%) */
--color-navy-lift: #2A3356; /* navy button hover (lighten) */
--color-border: #E4E3DF; /* card borders, dividers, input outlines */
--color-shadow: rgba(28, 35, 64, 0.07); /* brand-derived shadow, never gray */
/* ---- Semantic aliases ---- */
--bg: var(--color-off-white);
--surface: var(--color-white);
--fg1: var(--color-navy); /* headings, strong text */
--fg2: var(--color-navy-body); /* body copy */
--fg3: var(--color-navy-muted); /* muted / secondary */
--accent: var(--color-amber);
--border: var(--color-border);
/* ---- Font families ---- */
--font-headline: 'Domine', Georgia, 'Times New Roman', serif;
--font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ---- Type scale (tokens) ---- */
--text-display: 76px; /* hero headline */
--text-h1: 56px;
--text-h2: 40px;
--text-h3: 28px;
--text-h4: 22px;
--text-lead: 20px;
--text-body: 17px;
--text-small: 14px;
--text-label: 12px;
/* ---- Spacing — 8px base grid ---- */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
--space-5: 64px;
--space-6: 96px;
--space-7: 128px;
/* ---- Radii ---- */
--radius-sm: 6px; /* pills, small chips, input focus highlight */
--radius-btn: 8px; /* buttons */
--radius-md: 12px; /* swatches, nav demo, small cards */
--radius-lg: 16px; /* cards, hero panels */
/* ---- Elevation ---- */
--shadow-card: 0 2px 16px var(--color-shadow);
--shadow-hover: 0 8px 32px var(--color-shadow);
/* ---- Layout ---- */
--max-content: 1200px;
--gutter: 24px;
--measure: 68ch; /* max line length for body text */
/* ---- Motion ---- */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 150ms;
--dur: 200ms;
--dur-slow: 400ms;
}
/* ============================================================
SEMANTIC TYPE CLASSES
Domine for logo + headlines, Manrope for everything else.
Headlines are navy, never amber.
============================================================ */
.t-display {
font-family: var(--font-headline);
font-size: var(--text-display);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--fg1);
}
.t-h1 {
font-family: var(--font-headline);
font-size: var(--text-h1);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--fg1);
}
.t-h2 {
font-family: var(--font-headline);
font-size: var(--text-h2);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--fg1);
}
.t-h3 {
font-family: var(--font-headline);
font-size: var(--text-h3);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--fg1);
}
.t-h4 {
font-family: var(--font-headline);
font-size: var(--text-h4);
font-weight: 700;
line-height: 1.3;
color: var(--fg1);
}
.t-lead {
font-family: var(--font-body);
font-size: var(--text-lead);
font-weight: 400;
line-height: 1.65;
color: var(--fg2);
}
.t-body {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.7;
color: var(--fg2);
max-width: var(--measure);
}
.t-small {
font-family: var(--font-body);
font-size: var(--text-small);
font-weight: 400;
line-height: 1.6;
color: var(--fg3);
}
.t-label {
font-family: var(--font-body);
font-size: var(--text-label);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg3);
}
/* Section label — the slash motif in action: "/ 01 The IMPACT Method" */
.t-section-label {
font-family: var(--font-body);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-amber);
display: inline-flex;
align-items: center;
gap: 8px;
}
.t-section-label::before {
content: '/';
font-weight: 400;
font-size: 16px;
}
/* Headline highlight — max ONE phrase per headline */
.hl-underline { border-bottom: 4px solid var(--color-amber); padding-bottom: 2px; }
.hl-pill { background: var(--color-amber-tint); border-radius: var(--radius-sm); padding: 0 8px; }