/* ============================================================= STRIVE DESIGN SYSTEM — tokens Source: 25-683 STRIVE HUISSTIJL PITCH V01.pptx (theme1.xml) Type substitution: "Heveria" (paid, Piotr Łapa) → Space Grotesk ============================================================= */ /* ---------- Webfonts ---------- */ /* Inter (deck primary UI font) + Space Grotesk (Heveria substitute, headlines) */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"); :root { /* ============== COLOR — RAW PALETTE ============================ These exact hex values come straight from the deck's clrScheme "Strive" — do not normalize, do not soften. */ --color-ink: #333334; /* charcoal — text, surfaces */ --color-paper: #FFFFFF; /* canvas white */ --color-mint: #55FFD8; /* signature brand colour */ --color-blue: #007BFA; /* electric blue */ --color-blue-bright: #008AFF; /* used interchangeably with --color-blue in deck */ --color-yellow: #FFED07; /* high-voltage yellow */ --color-green: #00FF00; /* fluorescent / data-vis green */ --color-magenta: #FF00FF; /* magenta accent */ --color-purple: #5252CA; /* indigo / purple */ /* ============== COLOR — SEMANTIC =================================== */ /* Foreground */ --fg-1: var(--color-ink); /* primary text on light */ --fg-2: #5C5C5E; /* secondary text */ --fg-3: #8A8A8C; /* muted, captions */ --fg-on-dark: var(--color-paper); /* primary text on dark */ --fg-on-mint: var(--color-ink); /* mint bg uses dark ink */ --fg-on-blue: var(--color-paper); --fg-on-yellow: var(--color-ink); /* Background */ --bg-canvas: var(--color-paper); --bg-canvas-ink: var(--color-ink); /* dark mode hero */ --bg-mint: var(--color-mint); --bg-blue: var(--color-blue); --bg-yellow: var(--color-yellow); /* Borders / lines */ --line: rgba(51,51,52,0.12); --line-strong: rgba(51,51,52,0.32); --line-on-dark: rgba(255,255,255,0.16); /* ============== TYPOGRAPHY ===================================== */ --font-display: "Space Grotesk", "Heveria", "Inter", system-ui, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace; /* The deck's signature tagline ("upgrade today / profit tomorrow") mixes Bold roman + Bold-Italic with very wide letter-spacing. */ --tracking-hero: 0.045em; /* spc=365–500 in PPTX equivalent */ --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.08em; /* small uppercase labels */ --leading-tight: 1.02; --leading-snug: 1.18; --leading-body: 1.45; --leading-loose: 1.6; /* Scale (16px base) */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 40px; --fs-3xl: 56px; --fs-4xl: 80px; --fs-hero: 132px; /* the "upgrade today" treatment */ /* ============== SPACING / RADII / ELEVATION =================== */ --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; /* Strive uses sharp corners almost everywhere — capsules ONLY for pill-shaped chips/tags and the round dots in iconography. */ --radius-0: 0; --radius-sm: 2px; /* hairline rounding on inputs */ --radius-md: 4px; --radius-pill: 999px; --radius-circle: 50%; /* Shadows are used sparingly; the brand prefers flat colour blocks. When elevation is needed, it's soft and neutral. */ --shadow-1: 0 1px 2px rgba(51,51,52,0.06), 0 0 0 1px var(--line); --shadow-2: 0 4px 14px rgba(51,51,52,0.08); --shadow-3: 0 18px 40px -12px rgba(51,51,52,0.18); /* Motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============== SEMANTIC ELEMENT STYLES =========================== */ html, body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--leading-body); color: var(--fg-1); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* — Headings — Display weight is Space Grotesk Bold. Display copy is set in lowercase by default ("upgrade today"); Title Case is rare. */ h1, .h1 { font-family: var(--font-display); font-size: clamp(64px, 9vw, var(--fs-hero)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); text-transform: lowercase; margin: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.005em; text-transform: lowercase; margin: 0 0 var(--space-4); } h3, .h3 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); } h4, .h4 { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 600; line-height: var(--leading-snug); margin: 0 0 var(--space-2); } h5, .h5 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 600; line-height: var(--leading-snug); margin: 0 0 var(--space-2); } /* The deck's tagline pattern: bold roman, then bold italic, on a coloured background, with hero tracking. Use .hero-line + .hero-line--italic. */ .hero-line { font-family: var(--font-display); font-size: clamp(64px, 11vw, var(--fs-hero)); font-weight: 700; line-height: 1.0; letter-spacing: var(--tracking-hero); text-transform: lowercase; display: block; } .hero-line--italic { font-style: italic; } /* — Body — */ p { margin: 0 0 var(--space-4); text-wrap: pretty; } .text-lead { font-size: var(--fs-lg); line-height: var(--leading-snug); font-weight: 400; text-wrap: balance; } .text-body { font-size: var(--fs-base); line-height: var(--leading-body); } .text-small { font-size: var(--fs-sm); line-height: var(--leading-body); color: var(--fg-2); } .text-caption{ font-size: var(--fs-xs); line-height: var(--leading-body); color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* — Inline — */ a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--color-blue); } code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* — Eyebrow label (numbered list label, deck pattern: "01 / Results") — */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); } /* — Numerals (deck uses tabular figures for €462k etc) — */ .num, .metric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; } /* ========================================================= STRIVE BRAND STRIPE --------------------------------------------------------- Official identity stripe from the brand fiche. Six colours in fixed order, fixed ratios 1:1:1:1:2:3. Height H = X / 20, with H minimum 1mm in print. Total width = 9X. On product surfaces, render the stripe ONLY — no dimension labels, no tick marks, no proportions. Just the colours. ========================================================= */ .strive-stripe { display: flex; width: 100%; height: 10px; flex-shrink: 0; line-height: 0; } .strive-stripe > span { display: block; height: 100%; } .strive-stripe > span:nth-child(1) { background: var(--color-yellow); flex: 1; } .strive-stripe > span:nth-child(2) { background: var(--color-green); flex: 1; } .strive-stripe > span:nth-child(3) { background: var(--color-magenta); flex: 1; } .strive-stripe > span:nth-child(4) { background: var(--color-purple); flex: 1; } .strive-stripe > span:nth-child(5) { background: var(--color-blue); flex: 2; } .strive-stripe > span:nth-child(6) { background: var(--color-mint); flex: 3; } /* Drop one in any HTML page as:
*/