Welcome to the Infinity Partners Network

1 · Color Tokens (CSS Custom Properties)

All colors are declared as HSL values on :root and consumed via Tailwind semantic utilities (e.g. bg-primary, text-foreground). The site ships a dark-first theme; a .dark class mirrors :root and a .light class overrides for isolated light surfaces.

Base / Background

Card / Popover

Primary (Cyan)

Secondary (Purple)

Muted

Accent

Destructive

Border / Input / Ring

Light Surface Overrides (.light class)

2 · Typography

Two typefaces are loaded (Google Fonts via index.html). All heading elements share a negative letter-spacing for the premium executive aesthetic.

Font Families

Heading Defaults (CSS rule on h1–h6)

Heading Scale (Tailwind classes used in-code)

Body Scale

Font Weights Used

Gradient Text Utilities

Live Examples

H1 — Space Grotesk 700

H2 — Space Grotesk 700

H3 — Space Grotesk 700

Lead body — Inter 400, text-muted-foreground

Card body — Inter 400 small

Eyebrow label

3 · Border-Radius / Rounded Corners

--radius: 9999px sets the global shadcn radius variable to fully pill-shaped. Component-level overrides are applied where pill shape would break usability (e.g. dropdown panels).

Global Token

Nav Dropdown Override (CSS layer: components)

Tailwind Utilities Used Per Element

Visual Demonstration

4 · Gradient Definitions

All gradients are stored as CSS custom properties and exposed as Tailwind utility classes under @layer utilities. Apply with style={{ background: "var(--gradient-*)" }} or the matching utility class.

Hero Background

Section Divider

Card Gradient

Cyan Glow (radial)

Purple Glow (radial)

Video Overlay

Image Overlay (inline — community card)

Gradient Text (applied via background-clip: text)

5 · Shadow Tokens

Five shadow levels are defined as CSS custom properties and exposed as utility classes. Glow shadows double as accessibility focus indicators for interactive elements.

Glow Border Utilities

6 · Border & Outline Colors

Borders use semantic tokens. Interactive elements shift border color on hover to signal affordance.

7 · Glass / Backdrop Effects

Two glassmorphism utility classes provide the premium SaaS frosted-glass feel used on interactive overlays and modals.

.glass-card

background: hsl(224 25% 9% / 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid hsl(224 20% 20% / 0.6);

.glass-card-cyan

background: hsl(165 100% 50% / 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid hsl(165 100% 50% / 0.15);

8 · Animations & Keyframes

All keyframe animations are declared in @layer utilities and exposed as Tailwind utility classes. Reduced-motion media query disables all animations.

.animate-marquee — Logo ticker scroll

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
animation: marquee 35s linear infinite;

.animate-fade-up — Section entrance

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
animation: fadeUp 0.7s ease-out forwards;

.animate-fade-in — Soft reveal

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
animation: fadeIn 0.9s ease-out forwards;

.animate-float — Hero visual float

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
animation: float 6s ease-in-out infinite;

.animate-pulse-glow — AI/tech accent pulse

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
animation: pulseGlow 2.5s ease-in-out infinite;

Framer Motion (in-code transitions)

Hover transitions (Tailwind)

Reduced-motion override

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

9 · Component Patterns

Recurring UI patterns used across sections, documented with Tailwind class signatures.

Feature / Pillar Card

rounded-2xl border border-border bg-card p-6
flex flex-col gap-4
hover:border-primary/40 transition-colors duration-300
boxShadow: var(--shadow-card)

Icon container: w-11 h-11 rounded-xl bg-primary/10
                flex items-center justify-center shrink-0
Icon: w-5 h-5 text-primary

Badge / Eyebrow Pill

inline-flex items-center gap-2
px-4 py-1.5 rounded-full
border border-primary/40 bg-primary/10
text-primary text-sm font-medium

Section Header Block (centered)

text-center mb-14

Eyebrow:   text-primary text-sm font-semibold
           uppercase tracking-widest mb-3
H2:        text-3xl md:text-4xl font-bold
           text-foreground mb-4
Lead:      text-muted-foreground text-lg
           max-w-2xl mx-auto

Numbered Step Card

flex flex-col sm:flex-row gap-6
rounded-2xl border border-border bg-card
p-6 md:p-8
hover:border-primary/40 transition-colors duration-300
boxShadow: var(--shadow-card)

Step number: text-4xl font-bold text-primary/20
Title row:   flex items-center gap-2
             CheckCircle w-4 h-4 text-primary + h3

Buttons (shadcn — size="lg")

Primary (default):  bg-primary text-primary-foreground
                    rounded-full px-8 py-3 font-medium
                    hover: opacity-90

Outline variant:    border-border text-foreground
                    rounded-full px-8 py-3
                    hover: bg-muted

Image with Bottom-Text Overlay

Wrapper: rounded-2xl overflow-hidden aspect-[4/3]
Image:   w-full h-full object-cover
Overlay: absolute inset-0
         bg-gradient-to-t from-black/60 via-black/20
         to-transparent
Caption: absolute bottom-6 left-6 right-6
         text-white text-sm font-medium

Section Container

<section> py-20 md:py-28

Inner container:
  container max-w-6xl mx-auto px-6   (standard)
  container max-w-5xl mx-auto px-6   (narrower — steps)
  container max-w-3xl mx-auto px-6   (centred CTA / hero)

Grid gap:  gap-6 (feature grid)  |  gap-8 (2-col)
           gap-5 (community pillars)  |  gap-10 (image+pillars)

10 · Layout & Spacing System

The layout uses Tailwind's default 4px-base spacing scale. Key values used consistently across sections are listed below.

Section Vertical Padding

Container Max-Widths

Grid Configurations

Common Spacing Values

Z-Index Layering

Overflow & Scroll