/*! * Movalo Design Tokens, drop-in CSS custom properties. * Source of truth: branding/tokens.json * Usage rules: branding/brand-guide.md * * Link this file in your , then reference variables anywhere: * * color: var(--movalo-navy); * * Version 1.0 · 2026-04-28 */ :root { /* ---------- Color ---------- */ --movalo-navy: #1d1b4b; /* Primary brand · headlines, CTAs, lockup */ --movalo-ink: #14123a; /* Body text, hover state for navy */ --movalo-amber: #f5b643; /* Accent · CTA fill text, italic em on dark */ --movalo-cream: #fbf6ec; /* Default page background, use this, not white */ --movalo-warm: #f1e6d2; /* Logo strip / team band background */ --movalo-peach: #f5cfa8; /* Story background · highlight gradient stops */ --movalo-rose: #d68a6c; /* Eyebrows · italic em on light · pull-quote border */ --movalo-sage: #8aa07a; /* Cloud / nature gradient */ --movalo-mute: #6e6877; /* Body copy on cream, captions */ --movalo-line: rgba(20, 18, 58, 0.12); /* Hairline borders */ /* ---------- Type families ---------- */ --movalo-serif: 'Instrument Serif', 'Times New Roman', serif; --movalo-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --movalo-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---------- Type scale ---------- */ --movalo-size-h1: clamp(56px, 7vw, 112px); --movalo-size-h2: clamp(40px, 5vw, 72px); --movalo-size-h2-inner: clamp(34px, 4vw, 52px); --movalo-size-h3: 26px; --movalo-size-h3-form: 30px; --movalo-size-h4-name: 22px; --movalo-size-eyebrow: 11.5px; --movalo-size-lede: 19px; --movalo-size-body: 16px; --movalo-size-small: 14px; --movalo-size-cta: 14.5px; --movalo-size-fine: 11.5px; /* ---------- Layout ---------- */ --movalo-max-width: 1320px; --movalo-side-padding: 32px; --movalo-section-pad-v: 88px; --movalo-gap-card: 18px; --movalo-gap-hero: 48px; --movalo-gap-story: 64px; /* ---------- Radii ---------- */ --movalo-radius-card: 20px; --movalo-radius-card-lg: 24px; --movalo-radius-image: 16px; --movalo-radius-portrait: 240px 240px 24px 24px; --movalo-radius-cta-band: 32px; --movalo-radius-pill: 999px; --movalo-radius-input: 10px; /* ---------- Shadows ---------- */ --movalo-shadow-card-hover: 0 24px 60px -28px rgba(20, 18, 58, 0.3); --movalo-shadow-portrait: 0 40px 80px -30px rgba(20, 18, 58, 0.35); --movalo-shadow-chip: 0 16px 40px -10px rgba(20, 18, 58, 0.3); --movalo-shadow-badge: 0 12px 30px -8px rgba(20, 18, 58, 0.3); /* ---------- Transitions ---------- */ --movalo-transition-button: background 0.15s, transform 0.15s; --movalo-transition-card: transform 0.2s, box-shadow 0.2s; --movalo-transition-link: color 0.15s, opacity 0.15s; } /* ---------- Optional baseline ---------- */ /* Apply Movalo's baseline by adding class="movalo" to , or remove this block if you want to integrate the tokens into an existing app shell. */ body.movalo { margin: 0; padding: 0; background: var(--movalo-cream); color: var(--movalo-ink); font-family: var(--movalo-sans); font-size: var(--movalo-size-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } body.movalo a { color: inherit; text-decoration: none; } body.movalo img { max-width: 100%; display: block; } /* ---------- Utility classes (use sparingly) ---------- Optional helpers if you don't want to write your own component CSS. For full component patterns, see brand-guide.md. */ .movalo-eyebrow { font-family: var(--movalo-mono); font-size: var(--movalo-size-eyebrow); text-transform: uppercase; letter-spacing: 0.14em; color: var(--movalo-rose); } .movalo-h2 { font-family: var(--movalo-serif); font-weight: 400; font-size: var(--movalo-size-h2); line-height: 1; letter-spacing: -0.02em; color: var(--movalo-navy); text-wrap: balance; margin: 0 0 18px; } .movalo-h2 em { font-style: italic; color: var(--movalo-rose); } .movalo-btn-primary { background: var(--movalo-navy); color: var(--movalo-amber); border: 0; padding: 14px 22px; border-radius: var(--movalo-radius-pill); font-family: var(--movalo-sans); font-size: var(--movalo-size-cta); font-weight: 500; cursor: pointer; transition: var(--movalo-transition-button); display: inline-flex; align-items: center; gap: 8px; } .movalo-btn-primary:hover { background: var(--movalo-ink); transform: translateY(-1px); } .movalo-pull { font-family: var(--movalo-serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--movalo-navy); border-left: 3px solid var(--movalo-rose); padding: 4px 0 4px 18px; margin: 22px 0; }