/* ============================================================ STOP LOSS CLUB — Design Foundations Colors + Type tokens (base + semantic) ------------------------------------------------------------ RESKIN — fonts + colors retuned to the eleveight.studio look: • Neutral light-grey canvas (#F0F0F0), near-black ink. • One loud ACID-LIME accent (#BAFF00) — eleveight's signature. • Brand spring-green (#05FEAC) kept as a SECONDARY accent. • Dark interludes are monochrome near-black "coal" (no navy). Fonts (Google / Fontshare; still substitutes — no brand files): - General Sans → display + body (Neue-Montreal-style grotesque, the typeface family used across eleveight.studio) - Space Mono → data, tickers, eyebrow labels (finance role) If you have the real brand fonts, drop them in /fonts and swap the @import + --font-* vars below. ============================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ---- ACCENT 1 · SPRING GREEN (brand standard) ---- */ --lime: #05FEAC; /* brand green — the loud accent: panels, CTAs, highlights */ --lime-600: #03C685; /* darker green for hover / text-on-light */ --lime-200: #9CFFDC; /* soft green wash */ --lime-50: #E9FFF6; /* faintest green tint */ /* ---- ACCENT 2 · SPRING GREEN (brand, kept secondary) ---- */ --green: #05FEAC; /* original brand green — now secondary accent */ --green-700: #03C685; /* darker green for text-on-light / hover */ --green-300: #9CFFDC; /* tint for soft fills / washes */ --green-50: #E9FFF6; /* faintest green wash */ /* ---- INK + DARK SURFACES (monochrome) ---- */ --ink: #141414; /* near-black — primary text, pills, logo */ --ink-soft: #333333; /* secondary dark text */ --coal: #0E0E0E; /* dark feature-panel surface (was navy) */ --coal-900: #050505; /* deeper black for nested surfaces */ --navy: var(--coal); /* alias — legacy token, now coal */ --navy-800: var(--coal-900); /* alias — legacy token, now coal-900 */ /* ---- NEUTRAL CANVAS (eleveight light grey) ---- */ --bg-grey: #F0F0F0; /* neutral light-grey page background */ --cream: var(--bg-grey); /* alias — legacy token, now grey */ --paper: #FFFFFF; /* pure white cards */ --surface-2: #E6E6E3; /* eleveight-style light-grey card fill */ --line: #DCDCD8; /* hairline borders on grey */ --line-strong: #C6C6C1; /* ---- MASCOT ACCENTS (kept for logo/mascot fidelity) ---- */ --gold: #FBBF16; /* "Stop Pickers" stop-sign badge accent */ --red: #F5333F; /* the dart — sell / down / strikethrough */ --red-700: #C8202B; /* ---- SEMANTIC SURFACES ---- */ --bg: var(--bg-grey); --surface: var(--paper); --surface-dark: var(--coal); /* ---- SEMANTIC TEXT ---- */ --fg1: var(--ink); /* headings / primary */ --fg2: #3A3A38; /* body on grey */ --fg3: #74746F; /* muted / captions */ --fg-on-dark: #F2F2F0; /* text on coal/ink */ --fg-on-dark-2: #A6A6A2; /* muted text on coal */ --fg-on-green: var(--ink); /* text on green fills (always dark) */ --fg-on-lime: var(--ink); /* text on lime fills (always dark) */ /* ---- MARKET SEMANTICS (finance) ---- */ --up: var(--green-700); --down: var(--red); /* ---- TYPE FAMILIES ---- */ --font-display: 'General Sans', system-ui, sans-serif; --font-body: 'General Sans', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* ---- TYPE SCALE (clamped, fluid) ---- */ --t-display: clamp(2.75rem, 6vw, 5rem); /* hero statements */ --t-h1: clamp(2.1rem, 4.2vw, 3.25rem); --t-h2: clamp(1.6rem, 3vw, 2.25rem); --t-h3: 1.35rem; --t-lead: 1.18rem; /* intro paragraphs */ --t-body: 1rem; --t-small: 0.875rem; --t-eyebrow: 0.78rem; /* mono labels */ /* ---- RADII ---- */ --r-pill: 999px; --r-lg: 22px; /* large feature cards */ --r-md: 14px; /* standard cards / inputs */ --r-sm: 8px; /* ---- SPACING (8pt base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---- SHADOWS / ELEVATION ---- */ --sh-sm: 0 1px 2px rgba(0,0,0,.05); --sh-md: 0 6px 18px rgba(0,0,0,.07); --sh-lg: 0 18px 48px rgba(0,0,0,.10); --sh-lime: 0 10px 30px rgba(5,254,172,.30); /* glow under green CTAs */ --sh-green: 0 10px 30px rgba(5,254,172,.28); /* glow under green CTAs */ } /* ============================================================ SEMANTIC ELEMENT STYLES — opt in by adding the .sl-prose class, or copy these rules into your component CSS. ------------------------------------------------------------ Type note: eleveight sets headlines at MEDIUM weight (≈600), not black. General Sans tops out at 700, used for the wordmark. ============================================================ */ .sl-prose { font-family: var(--font-body); color: var(--fg2); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } .sl-prose h1, .sl-display, .sl-h1, .sl-h2, .sl-h3 { font-family: var(--font-display); color: var(--fg1); line-height: 1.04; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; } .sl-display { font-size: var(--t-display); } .sl-h1 { font-size: var(--t-h1); } .sl-h2 { font-size: var(--t-h2); } .sl-h3 { font-size: var(--t-h3); letter-spacing: -0.01em; font-weight: 600; } /* heavy italic wordmark treatment, as on the logo (700 = heaviest cut) */ .sl-wordmark { font-family: var(--font-display); font-weight: 700; font-style: italic; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); } /* mono eyebrow / data label */ .sl-eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); font-weight: 700; } .sl-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg2); } .sl-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }