/* =================================================================== * Growth.pro — Colors & Type * Sourced from Brand Identity Manual (Figma), 2026. * =================================================================== */ /* --- Fonts -------------------------------------------------------- */ @font-face { font-family: "Fraunces"; src: url("./fonts/Fraunces-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("./fonts/Fraunces-Italic-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } /* Inter is loaded via Google Fonts at the page level: * * (Inter Display is treated as Inter w/ optical size — Inter on web is the closest match.) */ :root { /* --- BRAND COLORS ---------------------------------------------- */ /* Primary dark (the brand's most-used hue; ~46 occurrences in figma) */ --gp-forest: #06211A; /* rgb(6,33,26) "Dark Forest" — main dark */ /* Primary accent */ --gp-orange: #F98441; /* rgb(249,132,65) "Nourishing Orange" */ --gp-terracotta: #D85F2E; /* rgb(216,95,46) "Terracotta" */ /* Earthy supports */ --gp-walnut: #5E4A36; /* rgb(94,74,54) "Walnut" */ --gp-olive: #7B8F4F; /* rgb(123,143,79) "Olive" */ --gp-pearl: #F5EFE3; /* rgb(245,239,227) "Brilliant Pearl" — light bg */ /* Cool */ --gp-aqua: #2A9C9D; /* rgb(42,156,157) "African Turquoise" / Dark Aqua */ /* Neutrals */ --gp-black: #1A1A1A; /* "Black" — only used where pure-black is wanted */ --gp-white: #FFFFFF; --gp-paper: #F2F2F2; /* page background (Light Grey) */ --gp-hairline: #DFE2E2; /* 1px rule separator */ /* --- SEMANTIC TOKENS ------------------------------------------- */ /* Surfaces */ --bg-page: var(--gp-paper); --bg-page-dark: var(--gp-forest); --bg-card: var(--gp-white); --bg-card-dark: var(--gp-forest); --bg-soft: var(--gp-pearl); /* Foregrounds (forest on light, white on dark) */ --fg-1: var(--gp-forest); /* primary text */ --fg-2: rgba(6, 33, 26, 0.80); /* secondary text / supporting copy */ --fg-3: rgba(6, 33, 26, 0.55); /* tertiary, captions */ --fg-on-dark-1: var(--gp-white); --fg-on-dark-2: rgba(255, 255, 255, 0.72); --fg-on-dark-3: rgba(255, 255, 255, 0.48); /* Lines */ --rule: var(--gp-hairline); --rule-on-dark: rgba(255, 255, 255, 0.16); --rule-soft: rgba(6, 33, 26, 0.20); /* Accent semantics — most CTAs and highlights use orange */ --accent: var(--gp-orange); --accent-press: var(--gp-terracotta); --accent-fg: var(--gp-white); /* --- TYPOGRAPHY ------------------------------------------------ */ --font-display: "Fraunces", "Times New Roman", serif; /* H1/H2 — editorial */ --font-sans: "Inter", "Inter Display", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* Reusable scale (px to keep parity with Figma spec) */ --fs-display: 128px; /* posters / chapter openers / brand wordmark */ --fs-h1: 64px; /* Fraunces Regular, lh 1.0, tracking -2% */ --fs-h2: 40px; /* Fraunces Italic, lh 48px, tracking -2% */ --fs-h3: 36px; /* Inter SemiBold UPPER, lh 42px, tracking -4% */ --fs-h4: 28px; /* Inter Bold, lh 36px, tracking -2% */ --fs-body: 24px; /* Inter Regular, lh 32px, tracking -4% */ --fs-lede: 20px; /* long-form body in brand book */ --fs-md: 16px; /* small body / metadata */ --fs-sm: 14px; --fs-xs: 12px; /* --- SPACING --------------------------------------------------- */ --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; /* --- RADII ----------------------------------------------------- */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; /* color tiles, chips */ --r-xl: 32px; --r-2xl: 48px; /* big content cards in the brand book */ --r-pill: 999px; /* --- SHADOWS / ELEVATION -------------------------------------- */ /* Inset cool sheen (used on big white cards in the brand manual) */ --shadow-inner-card: inset 0 24px 56px 0 rgba(168, 216, 245, 0.06), inset 0 1px 2px 0 rgba(216, 236, 248, 0.20); /* Soft outer card */ --shadow-card: 0 1px 2px rgba(6, 33, 26, 0.06), 0 8px 24px rgba(6, 33, 26, 0.06); /* Lifted */ --shadow-pop: 0 1px 2px rgba(6, 33, 26, 0.06), 0 12px 32px rgba(6, 33, 26, 0.10), 0 24px 56px rgba(6, 33, 26, 0.08); } /* --- SEMANTIC TEXT STYLES ---------------------------------------- */ /* Apply these classes directly. They mirror the brand-book Type Hierarchy. */ .gp-display { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.02em; color: var(--fg-1); } .gp-h1 { font-family: var(--font-display); font-weight: 400; /* Fraunces Regular */ font-size: var(--fs-h1); line-height: 1.0; letter-spacing: -0.02em; color: var(--fg-1); } .gp-h2 { font-family: var(--font-display); font-weight: 400; font-style: italic; /* Fraunces Italic */ font-size: var(--fs-h2); line-height: 1.2; /* 48 / 40 */ letter-spacing: -0.02em; color: var(--fg-1); } .gp-h3 { font-family: var(--font-sans); font-weight: 600; /* Inter SemiBold */ font-size: var(--fs-h3); line-height: 1.16; /* 42 / 36 */ letter-spacing: -0.04em; text-transform: uppercase; /* h3 in the brand book is set in caps */ color: var(--fg-1); } .gp-h4 { font-family: var(--font-sans); font-weight: 700; /* Inter Bold */ font-size: var(--fs-h4); line-height: 1.28; /* 36 / 28 */ letter-spacing: -0.02em; color: var(--fg-1); } .gp-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: 1.33; /* 32 / 24 */ letter-spacing: -0.02em; color: var(--fg-1); } .gp-lede { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lede); line-height: 1.4; /* 28 / 20 */ letter-spacing: -0.02em; color: var(--fg-2); } .gp-meta { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-2); } .gp-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm); line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); } /* --- COMPONENTS (atomic) ----------------------------------------- */ .gp-rule { height: 1px; background: var(--rule); width: 100%; } .gp-rule-soft { height: 1px; background: var(--rule-soft); width: 100%; } .gp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--r-pill); background: var(--gp-forest); color: var(--gp-white); font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 120ms ease, transform 120ms ease, opacity 120ms ease; } .gp-btn:hover { background: #0A2E25; } .gp-btn:active { transform: translateY(1px); } .gp-btn--accent { background: var(--accent); color: var(--accent-fg); } .gp-btn--accent:hover { background: var(--accent-press); } .gp-btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--rule-soft); } .gp-btn--ghost:hover { background: rgba(6,33,26,0.04); }