/* ==========================================================================
Noura — Colors & Type
"Smart nutrition. Real moments."
========================================================================== */
/* ---- Fonts ---------------------------------------------------------------
Display: Outfit (provided by brand) — used for headlines, product names,
wordmark-adjacent type. The brand book uses Bold for headers,
Semibold/Medium for sub-headers and quotes.
Body: Inter Regular (called for in the brand book). NOT INCLUDED in the
attached pack — load via Google Fonts or your own host. Outfit is
an acceptable secondary fallback for short body copy.
-------------------------------------------------------------------------- */
/* Outfit is loaded via Google Fonts from index.html. */
/* Static cuts removed — variable font above covers all weights. */
/* Inter — load via Google Fonts in document :
*/
:root {
/* ---- Color foundations (from brand book) ----------------------------- */
/* Primary */
--noura-carbon: #1C1F1E; /* Negro Carbón — the dominant surface */
--noura-beige: #E4D4BE; /* Beige Cálido — primary warm canvas */
/* Secondary / accent */
--noura-green: #7A8F7E; /* Verde Métrico — sage accent only */
/* Carbon scale (extrapolated for UI work; dark UI surfaces) */
--carbon-50: #F5F5F4; /* almost-white text on carbon */
--carbon-100: #E6E6E5;
--carbon-200: #C9CAC8;
--carbon-300: #9FA09E;
--carbon-400: #6E706E;
--carbon-500: #4A4D4B;
--carbon-600: #34373500; /* placeholder — see tier */
--carbon-600-: #343735;
--carbon-700: #272A29;
--carbon-800: #1C1F1E; /* = noura-carbon */
--carbon-900: #121413;
--carbon-950: #0A0B0B;
/* Beige scale (warm light surfaces — cup/canvas/merch) */
--beige-50: #FAF6EF;
--beige-100: #F2EAD9;
--beige-200: #E4D4BE; /* = noura-beige */
--beige-300: #D2BD9F;
--beige-400: #BFA784;
--beige-500: #A88E68;
--beige-600: #826A4D;
--beige-700: #5A4A35;
/* Sage scale (status, accents, never neon) */
--sage-50: #EEF2EE;
--sage-100: #D8E0D8;
--sage-200: #B7C4B8;
--sage-300: #95A696;
--sage-400: #7A8F7E; /* = noura-green */
--sage-500: #62775E;
--sage-600: #4C5E4A;
--sage-700: #344335;
/* Semantic — derived for product UI. Stay in-palette; no neon. */
--color-bg: var(--noura-carbon); /* default canvas: carbon */
--color-bg-soft: var(--carbon-700); /* raised cards on carbon */
--color-bg-warm: var(--beige-200); /* alt warm canvas */
--color-bg-warm-soft: var(--beige-100);
--color-line: rgba(228, 212, 190, 0.14); /* hairline on dark */
--color-line-warm: rgba(28, 31, 30, 0.12); /* hairline on beige */
--color-fg: var(--beige-200); /* default text on carbon */
--color-fg-strong: #F2EAD9; /* slightly hotter for H1 */
--color-fg-muted: rgba(228, 212, 190, 0.62);
--color-fg-subtle: rgba(228, 212, 190, 0.38);
--color-fg-on-warm: var(--noura-carbon);
--color-fg-on-warm-muted: rgba(28, 31, 30, 0.62);
--color-accent: var(--noura-green); /* status/active state */
--color-accent-strong: var(--sage-500);
--color-accent-soft: rgba(122, 143, 126, 0.18);
--color-success: var(--sage-400);
--color-warn: #C9A66B; /* warm amber, not neon */
--color-danger: #B5564A; /* desaturated terracotta */
/* ---- Type foundations ------------------------------------------------ */
--font-display: "Outfit", "Outfit Static", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
/* Modular scale — 1.250 (major third). 16px base. */
--fs-12: 0.75rem; /* 12 — fine print, eyebrow caps */
--fs-13: 0.8125rem; /* 13 — meta, labels */
--fs-14: 0.875rem; /* 14 — body S */
--fs-16: 1rem; /* 16 — body */
--fs-18: 1.125rem; /* 18 — body L / lead */
--fs-20: 1.25rem; /* 20 — H6 / inline heading */
--fs-24: 1.5rem; /* 24 — H5 */
--fs-30: 1.875rem; /* 30 — H4 */
--fs-36: 2.25rem; /* 36 — H3 */
--fs-48: 3rem; /* 48 — H2 */
--fs-64: 4rem; /* 64 — H1 */
--fs-80: 5rem; /* 80 — display */
--lh-tight: 1.04;
--lh-snug: 1.18;
--lh-normal: 1.5;
--lh-loose: 1.7;
--tr-tight: -0.02em;
--tr-snug: -0.01em;
--tr-normal: 0;
--tr-eyebrow: 0.16em; /* used heavily — see tagline + section caps */
/* ---- Spacing / radii / shadow / motion ------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
/* Soft, never harsh. Carbon-tinted elevations. */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.22);
--shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
--shadow-warm: 0 18px 40px -16px rgba(28, 31, 30, 0.18); /* on beige */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 160ms;
--dur-base: 240ms;
--dur-slow: 400ms;
}
/* ==========================================================================
Semantic typography — wire up real elements
========================================================================== */
.noura-eyebrow,
.eyebrow {
font-family: var(--font-display);
font-size: var(--fs-12);
font-weight: 500;
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--color-fg-muted);
}
.noura-display,
.display {
font-family: var(--font-display);
font-size: clamp(var(--fs-48), 6vw, var(--fs-80));
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--tr-tight);
color: var(--color-fg-strong);
text-wrap: balance;
}
h1, .h1 {
font-family: var(--font-display);
font-size: clamp(var(--fs-48), 5vw, var(--fs-64));
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--tr-tight);
color: var(--color-fg-strong);
text-wrap: balance;
}
h2, .h2 {
font-family: var(--font-display);
font-size: clamp(var(--fs-36), 3.6vw, var(--fs-48));
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--tr-tight);
color: var(--color-fg-strong);
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--fs-30);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--tr-snug);
color: var(--color-fg-strong);
}
h4, .h4 {
font-family: var(--font-display);
font-size: var(--fs-24);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--tr-snug);
color: var(--color-fg-strong);
}
h5, .h5 {
font-family: var(--font-display);
font-size: var(--fs-20);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-fg-strong);
}
h6, .h6 {
font-family: var(--font-display);
font-size: var(--fs-16);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-fg-strong);
}
p, .body {
font-family: var(--font-body);
font-size: var(--fs-16);
line-height: var(--lh-normal);
color: var(--color-fg-muted);
text-wrap: pretty;
}
.body-lg {
font-family: var(--font-body);
font-size: var(--fs-18);
line-height: var(--lh-normal);
color: var(--color-fg);
}
.body-sm,
small {
font-family: var(--font-body);
font-size: var(--fs-14);
line-height: var(--lh-normal);
color: var(--color-fg-muted);
}
.meta,
.label {
font-family: var(--font-body);
font-size: var(--fs-13);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--color-fg-muted);
}
.quote {
font-family: var(--font-display);
font-size: var(--fs-30);
font-weight: 500; /* Outfit Medium per brand book */
line-height: 1.25;
letter-spacing: var(--tr-snug);
color: var(--color-fg-strong);
}
.quote::before { content: "\201C"; }
.quote::after { content: "\201D"; }
code, .code {
font-family: var(--font-mono);
font-size: var(--fs-14);
color: var(--color-fg);
background: rgba(228, 212, 190, 0.06);
padding: 0.1em 0.4em;
border-radius: var(--radius-xs);
}
/* ==========================================================================
Surface helpers — tone-of-voice background classes
========================================================================== */
.on-carbon {
background: var(--noura-carbon);
color: var(--color-fg);
}
.on-carbon h1, .on-carbon h2, .on-carbon h3, .on-carbon h4, .on-carbon h5, .on-carbon h6 {
color: var(--color-fg-strong);
}
.on-beige {
background: var(--noura-beige);
color: var(--color-fg-on-warm);
}
.on-beige h1, .on-beige h2, .on-beige h3,
.on-beige h4, .on-beige h5, .on-beige h6 {
color: var(--noura-carbon);
}
.on-beige p, .on-beige .body {
color: var(--color-fg-on-warm-muted);
}
.on-beige .eyebrow,
.on-beige .noura-eyebrow {
color: var(--color-fg-on-warm-muted);
}
.on-sage {
background: var(--sage-500);
color: var(--color-fg-strong);
}