/* ========================================================================== Innova Capital — Colors & Type Derived from: Innova Capital_Intro_vf.pptx (theme "Innova Capital"), innovacap.com, and the firm's visual identity. Typography: Lora (serif, display) + Lato (sans, body). Both on Google Fonts. If you use this file standalone, load fonts like: ========================================================================== */ :root { /* ---------------------------------------------------------------------- BRAND COLORS Primary: Crimson "diamond" — used only in the logo and as sparing accent highlights (e.g. year markers, callout bullets). Never as a large fill. Source: logo vector + innovacap.com. Secondary: Warm taupe / mocha — the dominant "Innova brown." This is the signature color of the firm. Used for accent bars, dividers, hover states, icon fills. PPTX theme accent1. ---------------------------------------------------------------------- */ --innova-crimson: #B11E3A; /* logo diamond; red accent */ --innova-crimson-deep: #8A1629; /* press / hover */ --innova-crimson-tint: #F4D9DE; /* subtle bg wash */ --innova-taupe: #B6A591; /* signature "Innova brown" — accent1 */ --innova-taupe-deep: #786650; /* dark warm neutral — dk2 */ --innova-taupe-soft: #D7CCBB; /* taupe 40% */ --innova-taupe-tint: #F0EDE9; /* cream wash — used as section bg */ --innova-slate: #3D93A6; /* accent2 — muted teal-blue */ --innova-sage: #94AC98; /* accent6 — muted green */ --innova-sage-tint: #CAD8CD; /* accent4 — pale sage */ /* ---------------------------------------------------------------------- NEUTRALS Near-black ink + a warm-tinted grey scale. Background is cream-white, not pure #FFF — this is important for the premium, printed-paper feel. ---------------------------------------------------------------------- */ --ink: #0F0F0F; /* body text, headings */ --ink-soft: #2B2B2B; /* secondary text */ --grey-900: #3A3A3A; --grey-700: #5A5A5A; --grey-500: #7A7A7A; /* accent3 — link / meta */ --grey-300: #A2A2A2; /* accent5 */ --grey-200: #CFCBC5; /* hairlines, dividers */ --grey-100: #E7E6E6; /* lt2 — panels */ --grey-50: #F0EDE9; /* warm cream — page wash */ --paper: #FAF8F4; /* default page background */ --white: #FFFFFF; /* ---------------------------------------------------------------------- SEMANTIC FOREGROUND / BACKGROUND / BORDER ---------------------------------------------------------------------- */ --fg-1: var(--ink); /* primary text */ --fg-2: var(--ink-soft); /* secondary text */ --fg-3: var(--grey-500); /* meta, captions */ --fg-muted: var(--grey-300); --fg-invert: var(--paper); /* on dark bg */ --fg-accent: var(--innova-taupe-deep); --bg-page: var(--paper); --bg-surface: var(--white); --bg-section: var(--grey-50); --bg-inverse: var(--ink); --border-1: var(--grey-200); /* hairline */ --border-2: var(--innova-taupe-soft);/* brand border */ --border-strong: var(--innova-taupe-deep); --link: var(--innova-taupe-deep); --link-hover: var(--ink); /* ---------------------------------------------------------------------- TYPE FAMILIES ---------------------------------------------------------------------- */ --font-display: "Lora", "Didot", "Playfair Display", Georgia, serif; --font-sans: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---------------------------------------------------------------------- TYPE SCALE — restrained, editorial, serif-led. Sized for 16px base. Display numbers go big (statistics are a core storytelling mechanic for Innova). ---------------------------------------------------------------------- */ --fs-display-1: clamp(48px, 6vw, 88px); --fs-display-2: clamp(36px, 4.6vw, 64px); --fs-h1: clamp(32px, 3.6vw, 48px); --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body: 16px; --fs-small: 14px; --fs-xs: 12px; --fs-eyebrow: 11px; /* all-caps tracked labels */ --lh-tight: 1.08; --lh-snug: 1.22; --lh-body: 1.55; --lh-loose: 1.7; --tracking-eyebrow: 0.18em; --tracking-wide: 0.04em; --tracking-tight: -0.01em; /* ---------------------------------------------------------------------- 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; --space-10: 128px; --radius-0: 0; /* Innova is SQUARE. Corners are almost never rounded. */ --radius-1: 2px; /* tiny — for tags, pills */ --radius-2: 4px; /* buttons */ --radius-pill: 999px; /* reserved for status chips only */ --shadow-1: 0 1px 2px rgba(48, 38, 28, 0.06); --shadow-2: 0 2px 8px rgba(48, 38, 28, 0.08); --shadow-3: 0 12px 32px -12px rgba(48, 38, 28, 0.18); --shadow-card: 6px 6px 0 rgba(120, 102, 80, 0.10); /* signature offset, echoing the logo's layered squares */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 520ms; --maxw-text: 68ch; --maxw-page: 1200px; --maxw-wide: 1440px; } /* -------------------------------------------------------------------------- SEMANTIC TYPE CLASSES (drop-in) -------------------------------------------------------------------------- */ .display-1, h1.display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .display-stat { /* for big numbers like ">€1.6bn" */ font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-2); line-height: 1; letter-spacing: -0.015em; color: var(--fg-accent); } h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0 0 var(--space-4); } h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-3); } h3, .h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--fg-1); margin: 0 0 var(--space-2); } h4, .h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); line-height: 1.35; color: var(--fg-1); margin: 0 0 var(--space-2); } p, .body { font-family: var(--font-sans); font-weight: 300; /* Lato Light — per PPTX minorFont */ font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; max-width: var(--maxw-text); } .lead { font-family: var(--font-sans); font-weight: 300; font-size: 20px; line-height: 1.5; color: var(--fg-1); } .small, small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); } .eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-accent); } .meta { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--fg-3); text-transform: uppercase; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--innova-taupe-soft); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a:hover { color: var(--link-hover); border-color: var(--link-hover); } hr.rule { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-6) 0; } hr.rule-accent { border: 0; height: 2px; width: 48px; background: var(--innova-taupe-deep); margin: 0 0 var(--space-5); } /* Body defaults */ html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; }