/* ============================================================================
NVC RISING — Colors & Type
The visual foundation for NVC Rising (Nonviolent Communication) —
"continue to nurture the compassionate revolution."
Watercolor-on-paper aesthetic · editorial serif display · spectrum logo.
Load this file, then use the CSS variables below.
============================================================================ */
/* ---- Fonts (Google Fonts) ------------------------------------------------ */
/* Add to :
*/
:root {
/* ===== TYPE FAMILIES ==================================================== */
--font-display: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ===== NEUTRALS — warm paper & plum ink ================================= */
--paper: #FBF8F3; /* primary background — warm watercolor paper */
--paper-2: #F3ECE1; /* secondary surface — warm sand */
--paper-3: #ECE3D5; /* sunk wells, table stripes */
--white: #FFFFFF;
--line: #E5DCCF; /* hairline borders on paper */
--line-strong: #D6C9B5;
--ink: #2A2233; /* primary text — deep warm plum-black */
--ink-soft: #5B5266; /* secondary text */
--ink-faint: #8A8294; /* tertiary / captions / metadata */
--ink-ghost: #B6AFC0; /* placeholder, disabled */
/* ===== BRAND SPECTRUM — the logo rainbow (left → right) ================= */
--spectrum-teal: #34BFD4;
--spectrum-sky: #1E8FCD;
--spectrum-indigo: #6B6BC6;
--spectrum-magenta: #E0529E;
--spectrum-coral: #F0884A;
--spectrum-gold: #E8C46A;
--spectrum-leaf: #5AA52E;
/* The signature logo gradient. Use sparingly: logo, hero rules, eyebrows. */
--gradient-spectrum: linear-gradient(90deg,
#34BFD4 0%, #1E8FCD 17%, #6B6BC6 34%,
#E0529E 52%, #F0884A 70%, #E8C46A 84%, #5AA52E 100%);
/* Softer sunset gradient — drawn from the watercolor sky imagery */
--gradient-sunset: linear-gradient(180deg,
#564CA2 0%, #F3418D 42%, #F08A3C 72%, #ECC56A 100%);
/* ===== WATERCOLOR ACCENTS — the brush-stroke family ===================== */
/* Sampled from the brand's painted brush strokes. Used as highlights,
underlines, tags, and section accents. Each has a soft tint for fills. */
--accent-purple: #706BC6; --accent-purple-soft: #E6E4F4;
--accent-blue: #1E8FCD; --accent-blue-soft: #DCEFF8;
--accent-green: #4E9A2A; --accent-green-soft: #E2F1D8;
--accent-gold: #E2B14E; --accent-gold-soft: #F6ECCF;
--accent-coral: #F0884A; --accent-coral-soft: #FBE5D5;
--accent-magenta: #E0529E; --accent-magenta-soft: #F8DEEC;
--accent-rose: #C2473F; --accent-rose-soft: #F4DCD8;
/* Primary action color — the most "NVC" of the spectrum */
--brand: #E0529E; /* magenta/pink */
--brand-ink: #B23B7C; /* pressed / on-paper text use */
--brand-deep: #2A2540; /* twilight indigo — dark sections */
--brand-wine: #5C2F39; /* maroon "growth/rising" deep ground */
/* ===== STATUS ============================================================ */
--ok: #4E9A2A;
--warn: #E2B14E;
--error: #C2473F;
--info: #1E8FCD;
/* ===== ELEVATION & RADII (see colors_and_type for tokens too) =========== */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(42,34,51,.06), 0 1px 3px rgba(42,34,51,.05);
--shadow-md: 0 4px 14px rgba(42,34,51,.08), 0 2px 6px rgba(42,34,51,.05);
--shadow-lg: 0 18px 48px rgba(42,34,51,.14), 0 6px 16px rgba(42,34,51,.08);
--shadow-soft: 0 10px 40px rgba(86,76,162,.12); /* dreamy, colored */
/* ===== SPACING (8px base, with a 4px half-step) ========================= */
--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; --space-10: 128px;
}
/* ============================================================================
BASE TYPE STYLES — semantic, ready to use
Headings: Cormorant Garamond, weight 300, tight tracking, balanced wrap.
Body: Inter 300–400. Labels/eyebrows/buttons: JetBrains Mono, UPPERCASE.
============================================================================ */
body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
font-weight: 400;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 300;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
h1 { font-size: clamp(48px, 8.6vw, 116px); line-height: 0.98; letter-spacing: -0.02em; }
h2 { font-size: clamp(40px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -0.018em; }
h3 { font-size: clamp(28px, 3vw, 48px); line-height: 1.08; letter-spacing: -0.012em; }
h4 { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; letter-spacing: -0.005em; }
h5 { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.3; }
/* Italic Cormorant is the signature accent — emphasized words in headings,
and all pull-quotes. */
h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 400; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.55; color: var(--ink-soft); font-weight: 300; }
/* Eyebrow — wide-tracked mono uppercase label above headings */
.eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Pull-quote — large italic serif */
.quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(34px, 6vw, 88px);
line-height: 1.08;
letter-spacing: -0.01em;
text-wrap: balance;
}
/* Mono labels — tags, metadata, day-of-week, attributions */
.label, .tag, .meta {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-faint);
}
code, kbd, pre, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--brand); }