/* ============================================================================
SLINGSHOT MARKETING — Colors & Type Foundations
----------------------------------------------------------------------------
Amber primary system. Bold grotesk headlines (Archivo) + clean grotesk body
(Hanken Grotesk). Load fonts in HTML via:
NOTE: webfonts are declared via @font-face below, pointing at Fontsource's
CDN-hosted variable files (stable absolute URLs). Replace the src with
self-hosted files in fonts/ when the brand font files are supplied.
============================================================================ */
/* ----------------------------------------------------------- WEBFONTS */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('https://cdn.jsdelivr.net/fontsource/fonts/archivo:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
:root {
/* ---------------------------------------------------------------- COLOR */
/* Brand accent — Slingshot orange, sampled from the real logo (avg #E8823F,
hot peak #F36A10). Vivid + warm; the one hero color. Used with restraint. */
--accent: #EE7C36; /* CTA pills, highlighted headline phrase, stars, icons */
--accent-punch: #F36A10; /* hottest fill for emphasis (sampled logo peak) */
--accent-deep: #C9621F; /* hover / pressed darken on accent surfaces */
--accent-tint: #FBE7D5; /* faint orange wash, badges, icon chips */
--on-accent: #FFFFFF; /* text/icons on accent fills */
/* Ink & text */
--ink: #212020; /* headlines — sampled from logo wordmark */
--ink-2: #2A2A2A; /* primary body text */
--muted: #6B6B6B; /* secondary text, captions */
--muted-2: #8C857B; /* tertiary / disabled */
/* Surfaces */
--bg: #FFFFFF; /* base page */
--bg-warm: #FAF7F2; /* warm off-white, alternating sections */
--soft: #F5F0E8; /* cream — feature pills, service & testimonial cards */
--soft-2: #EFE8DB; /* deeper cream, hover on soft surfaces */
/* Lines */
--divider: #D9D0C0; /* hairline rules, card borders */
--divider-soft: #E8E0D2; /* faint internal separators */
/* Functional (used sparingly — stars reuse --accent) */
--star: var(--accent);
/* ----------------------------------------------------------- TYPEFACES */
--font-display: 'Archivo', 'Arial Black', system-ui, sans-serif; /* headlines */
--font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* everything else */
/* ------------------------------------------------------------- WEIGHTS */
--w-regular: 400; /* @kind font */
--w-medium: 500; /* @kind font */
--w-semi: 600; /* @kind font */
--w-bold: 700; /* @kind font */
--w-xbold: 800; /* @kind font */
--w-black: 900; /* @kind font */
/* ------------------------------------------------------ TYPE SCALE (clamped, mobile-first) */
--fs-display: clamp(2.75rem, 7vw, 5.25rem); /* @kind font */
--fs-h1: clamp(2.25rem, 5vw, 3.5rem); /* @kind font */
--fs-h2: clamp(1.75rem, 3.5vw, 2.5rem); /* @kind font */
--fs-h3: clamp(1.25rem, 2vw, 1.5rem); /* @kind font */
--fs-stat: clamp(2.5rem, 5vw, 4rem); /* @kind font */
--fs-lead: clamp(1.125rem, 1.6vw, 1.375rem); /* @kind font */
--fs-body: 1.0625rem; /* @kind font */
--fs-sm: 0.9375rem; /* @kind font */
--fs-eyebrow: 0.8125rem; /* @kind font */
/* ----------------------------------------------------------- TRACKING */
--track-tight: -0.03em; /* @kind font */
--track-snug: -0.015em; /* @kind font */
--track-normal: 0; /* @kind font */
--track-eyebrow: 0.14em; /* @kind font */
/* ------------------------------------------------------------- LEADING */
--lh-tight: 1.05; /* @kind font */
--lh-snug: 1.18; /* @kind font */
--lh-body: 1.6; /* @kind font */
/* --------------------------------------------------------------- SPACE (8pt base) */
--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;
--section-y: clamp(64px, 9vw, 120px); /* @kind spacing */
--gutter: clamp(20px, 5vw, 80px); /* @kind spacing */
--maxw: 1200px; /* @kind spacing */
/* -------------------------------------------------------------- RADIUS */
--r-pill: 999px; /* buttons, feature pills, chips */
--r-card: 16px; /* cards, image cards */
--r-lg: 24px; /* large panels, embeds */
--r-sm: 10px; /* inputs, small chips */
/* ------------------------------------------------------------- SHADOWS (soft, warm-tinted) */
--shadow-sm: 0 1px 2px rgba(31,29,26,0.06), 0 1px 3px rgba(31,29,26,0.05);
--shadow-md: 0 4px 12px rgba(31,29,26,0.07), 0 2px 4px rgba(31,29,26,0.04);
--shadow-lg: 0 18px 40px rgba(31,29,26,0.10), 0 6px 12px rgba(31,29,26,0.05);
--shadow-accent: 0 10px 24px rgba(238,124,54,0.32); /* lift under accent CTAs */
/* ------------------------------------------------------------- MOTION */
--ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
--dur-fast: 140ms; /* @kind other */
--dur: 240ms; /* @kind other */
--dur-slow: 420ms; /* @kind other */
}
/* ============================================================================
SEMANTIC ELEMENT STYLES — apply with the matching class or element
============================================================================ */
.ss-eyebrow {
font-family: var(--font-body);
font-weight: var(--w-bold);
font-size: var(--fs-eyebrow);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--accent);
}
.ss-display {
font-family: var(--font-display);
font-weight: var(--w-black);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--track-tight);
color: var(--ink);
text-wrap: balance;
}
.ss-h1 {
font-family: var(--font-display);
font-weight: var(--w-xbold);
font-size: var(--fs-h1);
line-height: var(--lh-snug);
letter-spacing: var(--track-snug);
color: var(--ink);
text-wrap: balance;
}
.ss-h2 {
font-family: var(--font-display);
font-weight: var(--w-xbold);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--track-snug);
color: var(--ink);
}
.ss-h3 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--fs-h3);
line-height: 1.2;
letter-spacing: var(--track-snug);
color: var(--ink);
}
.ss-lead {
font-family: var(--font-body);
font-weight: var(--w-regular);
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--muted);
}
.ss-body {
font-family: var(--font-body);
font-weight: var(--w-regular);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-2);
}
/* The signature move: one phrase of a headline in accent */
.ss-hl { color: var(--accent); }
/* ============================================================================
PRIMITIVES
============================================================================ */
/* Pill button — accent fill */
.ss-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: var(--w-bold);
font-size: var(--fs-sm);
letter-spacing: 0.01em;
color: var(--on-accent);
background: var(--accent);
border: none;
border-radius: var(--r-pill);
padding: 14px 26px;
cursor: pointer;
text-decoration: none;
box-shadow: var(--shadow-accent);
transition: transform var(--dur) var(--ease),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.ss-btn:hover { background: var(--accent-deep); transform: translateY(-2px); }
.ss-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* Secondary / ghost pill */
.ss-btn--ghost {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--divider);
box-shadow: none;
}
.ss-btn--ghost:hover { background: var(--soft); border-color: var(--ink); transform: translateY(-2px); }
/* Feature pill — cream, stacked under hero */
.ss-feature-pill {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-weight: var(--w-semi);
font-size: var(--fs-body);
color: var(--ink-2);
background: var(--soft);
border-radius: var(--r-pill);
padding: 14px 24px;
}
/* Card — rounded, soft shadow */
.ss-card {
background: var(--bg);
border: 1px solid var(--divider-soft);
border-radius: var(--r-card);
box-shadow: var(--shadow-md);
padding: var(--space-6);
}
.ss-card--soft { background: var(--soft); border-color: transparent; box-shadow: none; }