/* ============================================================= Innovation Network 2.0 — Foundations Round · Glass · Modern · Warm · Innovative · Wise ============================================================= */ /* -- Brand fonts (uploaded TTFs) ------------------------------ */ /* IBM Plex Sans — UI / body. Variable-ish via individual weight files. */ @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* IBM Plex Mono — meta labels, stamps, code. */ @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } /* Instrument Serif — optional display serif (kept available for editorial moments). */ /* Chivo — display / headings. Variable font drives the full weight range. */ @font-face { font-family: 'Chivo'; src: url('fonts/Chivo-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Chivo'; src: url('fonts/Chivo-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Chivo'; src: url('fonts/Chivo-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Chivo'; src: url('fonts/Chivo-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } :root { /* ---------- BRAND COLORS ---------- */ /* Core forest greens — derived from logo + "keep the green" mandate */ --in-forest-900: #0E2A1F; /* near-black, warmth-tinted */ --in-forest-800: #143C2C; --in-forest-700: #1B5238; --in-forest-600: #226A45; /* primary brand green */ --in-forest-500: #2E8B57; --in-forest-400: #4FA86E; --in-forest-300: #7AC392; --in-forest-200: #B7DEC2; --in-forest-100: #DEEEDF; --in-forest-050: #EFF6EF; /* Gradient accent — purple → teal → green (the wave) */ --in-grad-purple: #4B3274; --in-grad-teal: #0F756E; --in-grad-green: #74BB6E; /* Warm tones — sand, amber, copper for the "warm" pillar */ --in-sand-100: #F6EFE0; --in-sand-200: #ECDFC2; --in-amber-400: #D8A24A; --in-amber-500: #C28837; --in-copper-600: #A35E2E; /* Neutral warm scale — never pure greys; always tinted */ --in-cream: #FAF7F0; /* primary page bg */ --in-paper: #F3EEE2; /* secondary surface */ --in-stone-100: #E8E2D2; --in-stone-300: #B8B0A0; --in-stone-500: #6A6357; --in-stone-700: #3A372F; --in-ink: #161613; /* near-black for text */ /* Semantic */ --in-success: var(--in-forest-500); --in-warning: var(--in-amber-500); --in-danger: #C8412E; --in-info: var(--in-grad-teal); /* ---------- SEMANTIC FG / BG ---------- */ --fg-1: var(--in-ink); /* primary text */ --fg-2: var(--in-stone-700); /* secondary text */ --fg-3: var(--in-stone-500); /* tertiary / meta */ --fg-on-dark: var(--in-cream); --fg-brand: var(--in-forest-600); --bg-1: var(--in-cream); /* default page */ --bg-2: var(--in-paper); /* alt surface */ --bg-3: var(--in-sand-100); /* warm panel */ --bg-dark: var(--in-forest-900); /* dark hero */ --bg-brand: var(--in-forest-600); /* ---------- GLASS ---------- */ --glass-bg: rgba(255, 252, 244, 0.55); --glass-bg-dark: rgba(20, 60, 44, 0.45); --glass-border: rgba(255, 255, 255, 0.6); --glass-border-dark: rgba(255, 255, 255, 0.12); --glass-blur: 22px; --glass-shadow: 0 8px 32px -8px rgba(14, 42, 31, 0.18), 0 2px 8px -2px rgba(14, 42, 31, 0.08), inset 0 1px 0 rgba(255,255,255,0.7); --glass-shadow-dark: 0 8px 32px -8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); /* ---------- TYPOGRAPHY ---------- */ /* Brand fonts — Chivo for display, IBM Plex Sans for UI. Mono falls back to system since IBM Plex Mono wasn't uploaded — flagged in README. */ --font-display: 'Chivo', 'Inter', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; --fs-display-xl: clamp(56px, 8vw, 112px); /* @kind font */ --fs-display-lg: clamp(44px, 6vw, 80px); /* @kind font */ --fs-display-md: clamp(36px, 4.5vw, 56px); /* @kind font */ --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 19px; --fs-body-lg: 19px; --fs-body: 16px; --fs-body-sm: 14px; --fs-meta: 12px; --lh-display: 1.02; /* @kind font */ --lh-heading: 1.12; /* @kind font */ --lh-body: 1.55; /* @kind font */ --tracking-tight: -0.02em; /* @kind font */ --tracking-display: -0.025em; /* @kind font */ --tracking-eyebrow: 0.14em; /* @kind font */ /* ---------- SPACING (4px 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; /* ---------- RADII (round, generous) ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 48px; --r-pill: 999px; /* ---------- SHADOWS (warm-tinted, layered) ---------- */ --shadow-xs: 0 1px 2px rgba(14, 42, 31, 0.06); --shadow-sm: 0 2px 6px -1px rgba(14, 42, 31, 0.08), 0 1px 2px rgba(14, 42, 31, 0.04); --shadow-md: 0 8px 20px -4px rgba(14, 42, 31, 0.12), 0 2px 6px -2px rgba(14, 42, 31, 0.06); --shadow-lg: 0 20px 40px -12px rgba(14, 42, 31, 0.18), 0 6px 16px -6px rgba(14, 42, 31, 0.08); --shadow-xl: 0 32px 64px -16px rgba(14, 42, 31, 0.24), 0 12px 24px -8px rgba(14, 42, 31, 0.10); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); --shadow-glow: 0 0 0 6px rgba(34, 106, 69, 0.12); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 280ms; /* @kind other */ --dur-slow: 480ms; /* @kind other */ /* ---------- BRAND GRADIENTS ---------- */ --grad-wave: linear-gradient(115deg, var(--in-grad-purple) 0%, var(--in-grad-teal) 50%, var(--in-grad-green) 100%); --grad-forest: linear-gradient(160deg, var(--in-forest-800) 0%, var(--in-forest-600) 100%); --grad-warm-glow: radial-gradient(circle at 30% 20%, rgba(216, 162, 74, 0.25), transparent 60%); /* @kind color */ --grad-sun: linear-gradient(180deg, var(--in-sand-100) 0%, var(--in-cream) 100%); } /* ---------- SEMANTIC TEXT ELEMENTS ---------- */ .in-display { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg-1); font-weight: 400; } .in-display em, .in-display .italic { font-style: italic; } .in-h1, h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-1); } .in-h2, h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-1); } .in-h3, h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; color: var(--fg-1); } .in-h4, h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; color: var(--fg-1); } .in-body, p { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } .in-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--fg-2); } .in-body-sm { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-3); } .in-eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-brand); } .in-meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; color: var(--fg-3); text-transform: uppercase; } code, .in-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--in-sand-100); padding: 2px 6px; border-radius: var(--r-xs); } /* ============================================================= LOGO — safe placement. The logo PNGs are transparent. VERSIONS (all in assets/, all transparent): logo-wordmark-black.png / -white.png clean wordmark — THE DEFAULT logo-wordmark-est-black.png / -white.png wordmark with EST. 2046 baked in logo-mark-black/white/gradient.png wave mark only (tiny / square) EST. 2046 RULE — the "EST. 2046" tag exists ONLY inside the -est- lockup files. NEVER typeset "EST. 2046" by hand next to the clean logo. Use the -est- lockup AT MOST ONCE per artifact and ONLY at a large size (cover / hero / title slide / back cover, height ≳ 48px). Everywhere small — nav, chrome, footer, any header — use the CLEAN wordmark (or the mark). PLACEMENT RULES enforced by these classes: • Never stretched — size with ONE fixed dimension (height), width stays auto; object-fit:contain guards any explicit box. • Never framed — no background, no border, no padding box. Pick the variant that suits the background instead of drawing a contrasting box: black on light, white on dark. ============================================================= */ .in-logo { display: block; height: 40px; /* the ONE fixed dimension */ width: auto; /* never fixed alongside height → no stretch */ max-width: 100%; object-fit: contain; /* safety net if a box is forced on it */ background: none !important; /* never a frame */ border: 0 !important; padding: 0 !important; box-shadow: none !important; } .in-logo--sm { height: 28px; } .in-logo--lg { height: 64px; } .in-logo--xl { height: 96px; } /* EST. 2046 lockup — large by default so it is never used tiny. */ .in-logo--est { height: 64px; } /* Mark (square-ish) sizing helper — keeps it square without stretch */ .in-logo-mark { display: block; width: 40px; height: auto; object-fit: contain; background: none !important; border: 0 !important; } /* ============================================================= PILL / BADGE — the ONE canonical capsule. A pill is a SINGLE element: one fill OR one 1px border, never both a border AND a ring, and NEVER a pill wrapping a pill. Put the label text directly inside .in-pill — do not nest another rounded/bordered element in it (that is what renders as a "double pill"). For a leading dot use .in-pill__dot. ============================================================= */ .in-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--in-forest-050); color: var(--in-forest-700); border: 1px solid var(--in-forest-200); box-shadow: none; /* no ring — a shadow-ring reads as a 2nd pill */ } /* Any element nested directly inside a pill must NOT re-draw a capsule. */ .in-pill > * { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; } .in-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .in-pill--neutral { background: #fff; color: var(--fg-2); border-color: var(--in-stone-100); } .in-pill--sand { background: var(--in-sand-100); color: var(--in-copper-600); border-color: var(--in-sand-200); } .in-pill--ink { background: var(--in-ink); color: var(--in-cream); border-color: transparent; } .in-pill--solid { background: var(--in-forest-600); color: #fff; border-color: transparent; }