DATA Foundation Community Center & Trade Hub
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--olive: #3d3b2e;
--olive-dark: #2a2920;
--olive-mid: #4f4d3c;
--cream: #f0ead6;
--cream-dark: #e2d8bc;
--red: #e63329;
--red-dark: #b8261e;
--white: #faf8f2;
--text-body: #2a2920;
--text-muted: #6b6649;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--text-body); overflow-x: hidden; }
nav {
background: var(--olive-dark);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 4rem;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 3px solid var(--red);
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo img { width: 44px; height: 44px; border-radius: 50%; }
.nav-wordmark { font-family: 'Bebas Neue', sans-serif; color: var(--cream); font-size: 1.4rem; letter-spacing: 0.08em; line-height: 1.1; }
.nav-wordmark span { display: block; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--cream-dark); font-family: 'Inter', sans-serif; font-weight: 500; text-transform: uppercase; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: var(--cream-dark); text-decoration: none; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.2s; }
.nav-links a:hover { color: var(--red); }
.nav-cta { background: var(--red); color: var(--cream) !important; padding: 0.45rem 1.2rem; border-radius: 2px; }
.nav-cta:hover { background: var(--red-dark) !important; }
.hero { min-height: 92vh; background: var(--olive-dark); display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(240,234,214,0.03) 60px, rgba(240,234,214,0.03) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(240,234,214,0.03) 60px, rgba(240,234,214,0.03) 61px); }
.hero-content { padding: 6rem 4rem 6rem 5rem; position: relative; z-index: 2; }
.hero-eyebrow { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.hero-eyebrow::before { content: ''; display: inline-block; width: 32px; height: 2px; background: var(--red); }
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 7vw, 7.5rem); line-height: 0.92; color: var(--cream); letter-spacing: 0.02em; margin-bottom: 1.75rem; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-sub { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.2rem; color: var(--cream-dark); line-height: 1.6; max-width: 480px; margin-bottom: 2.5rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-primary { background: var(--red); color: var(--cream); border: none; padding: 1rem 2rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.15s; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--cream); border: 1.5px solid rgba(240,234,214,0.4); padding: 1rem 2rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color 0.2s, transform 0.15s; }
.btn-outline:hover { border-color: var(--cream); transform: translateY(-1px); }
.hero-visual { display: flex; align-items: center; justify-content: center; padding: 4rem 4rem 4rem 0; }
.hero-seal-ring { width: 420px; height: 420px; border-radius: 50%; border: 2px solid rgba(240,234,214,0.15); display: flex; align-items: center; justify-content: center; animation: slowSpin 40s linear infinite; }
@keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hero-seal-inner { width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(240,234,214,0.1); display: flex; align-items: center; justify-content: center; animation: slowSpin 40s linear infinite reverse; }
.hero-seal-img { width: 220px; height: 220px; border-radius: 50%; animation: slowSpin 40s linear infinite; }
section { padding: 6rem 5rem; }
.section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.section-label::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--red); }
.who { background: var(--white); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.who h2 { font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem; line-height: 0.95; color: var(--olive-dark); margin-bottom: 1.5rem; letter-spacing: 0.02em; }
.who h2 em { color: var(--red); font-style: normal; }
.who p { font-size: 1rem; line-height: 1.85; color: var(--text-muted); margin-bottom: 1rem; }
.who-accent { background: var(--olive-dark); padding: 3rem; position: relative; overflow: hidden; }
.who-accent::before { content: 'DATA'; font-family: 'Bebas Neue', sans-serif; font-size: 10rem; color: rgba(240,234,214,0.05); position: absolute; top: -1rem; right: -1.5rem; line-height: 1; pointer-events: none; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; position: relative; z-index: 1; }
.stat-card { padding: 1.75rem; border: 1px solid rgba(240,234,214,0.12); }
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--cream); line-height: 1; margin-bottom: 0.35rem; }
.stat-num span { color: var(--red); }
.stat-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,234,214,0.55); }
.offer { background: var(--cream); }
.offer h2 { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--olive-dark); margin-bottom: 3.5rem; letter-spacing: 0.02em; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.offer-card { background: var(--white); border-top: 4px solid var(--olive); padding: 2rem 1.75rem; transition: border-color 0.2s, transform 0.2s; }
.offer-card:hover { border-color: var(--red); transform: translateY(-3px); }
.offer-card.red-top { border-color: var(--red); }
.offer-icon { width: 40px; height: 40px; background: var(--olive-dark); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.offer-icon svg { width: 20px; height: 20px; fill: var(--cream); }
.offer-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--olive-dark); letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.offer-sub { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.offer-list { list-style: none; padding: 0; }
.offer-list li { font-size: 0.88rem; color: var(--text-muted); padding: 0.4rem 0; border-bottom: 1px solid var(--cream-dark); display: flex; align-items: center; gap: 0.5rem; line-height: 1.4; }
.offer-list li::before { content: ''; display: inline-block; width: 5px; height: 5px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.offer-list li:last-child { border-bottom: none; }
.offer-cta { margin-top: 1.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); font-style: italic; }
.pathway { background: var(--olive-dark); color: var(--cream); }
.pathway h2 { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--cream); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.pathway-sub { font-family: 'DM Serif Display', serif; font-style: italic; color: rgba(240,234,214,0.6); font-size: 1.05rem; margin-bottom: 3rem; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(240,234,214,0.1); }
.step { background: var(--olive-dark); padding: 1.75rem 1.5rem; transition: background 0.2s; cursor: default; }
.step:hover { background: var(--olive-mid); }
.step-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: rgba(240,234,214,0.1); line-height: 1; margin-bottom: 0.5rem; transition: color 0.2s; }
.step:hover .step-num { color: var(--red); }
.step-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--cream); letter-spacing: 0.05em; }
.step-line { width: 24px; height: 2px; background: var(--red); margin: 0.75rem 0; transition: width 0.2s; }
.step:hover .step-line { width: 40px; }
.step-phase { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,234,214,0.4); }
.pathway-footer { margin-top: 2.5rem; padding: 1.5rem 2rem; border-left: 4px solid var(--red); background: rgba(230,51,41,0.08); }
.pathway-footer p { font-family: 'DM Serif Display', serif; font-size: 1.05rem; color: var(--cream); font-style: italic; }
.impact { background: var(--red); color: var(--cream); padding: 5rem; text-align: center; }
.impact-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(240,234,214,0.7); margin-bottom: 1.5rem; }
.impact h2 { font-family: 'Bebas Neue', sans-serif; font-size: 4rem; color: var(--cream); margin-bottom: 3rem; letter-spacing: 0.02em; }
.impact-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; }
.impact-stat { border-top: 2px solid rgba(240,234,214,0.3); padding-top: 1.5rem; }
.impact-num { font-family: 'Bebas Neue', sans-serif; font-size: 4rem; line-height: 1; color: var(--cream); }
.impact-desc { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,234,214,0.7); margin-top: 0.5rem; line-height: 1.4; }
.impact-quote { max-width: 680px; margin: 0 auto; font-family: 'DM Serif Display', serif; font-size: 1.5rem; font-style: italic; color: rgba(240,234,214,0.9); line-height: 1.6; }
.why { background: var(--white); display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start; }
.why h2 { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--olive-dark); letter-spacing: 0.02em; line-height: 0.95; margin-bottom: 1.5rem; }
.why h2 em { color: var(--red); font-style: normal; }
.why-intro { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--text-muted); font-style: italic; line-height: 1.65; }
.why-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.why-item { padding: 1.75rem; background: var(--cream); border-left: 3px solid var(--olive); transition: border-color 0.2s; }
.why-item:hover { border-color: var(--red); }
.why-item h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: var(--olive-dark); letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.why-item p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.cta-final { background: var(--olive-dark); padding: 6rem 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.cta-final h2 { font-family: 'Bebas Neue', sans-serif; font-size: 4rem; color: var(--cream); letter-spacing: 0.02em; line-height: 0.95; margin-bottom: 1rem; }
.cta-final h2 em { color: var(--red); font-style: normal; }
.cta-final p { font-size: 1rem; color: rgba(240,234,214,0.65); line-height: 1.7; font-family: 'DM Serif Display', serif; font-style: italic; }
.cta-ways { display: flex; flex-direction: column; gap: 0.85rem; }
.cta-way { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border: 1px solid rgba(240,234,214,0.12); cursor: pointer; transition: background 0.2s, border-color 0.2s; text-decoration: none; }
.cta-way:hover { background: rgba(230,51,41,0.12); border-color: var(--red); }
.cta-way-label { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: var(--cream); letter-spacing: 0.05em; }
.cta-way-arrow { font-size: 1.1rem; color: var(--red); font-weight: 700; transition: transform 0.2s; }
.cta-way:hover .cta-way-arrow { transform: translateX(4px); }
footer { background: var(--olive-dark); border-top: 1px solid rgba(240,234,214,0.1); padding: 2.5rem 5rem; display: flex; align-items: center; justify-content: space-between; }
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--cream); letter-spacing: 0.1em; }
.footer-logo span { display: block; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.25em; color: rgba(240,234,214,0.45); text-transform: uppercase; margin-top: -4px; }
.footer-text { font-size: 0.78rem; color: rgba(240,234,214,0.35); text-align: center; font-style: italic; font-family: 'DM Serif Display', serif; }
.chi-star { width: 18px; height: 18px; }
.chicago-stars { display: flex; align-items: center; gap: 0.5rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-content > * { animation: fadeUp 0.8s ease both; }
.hero-eyebrow { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.25s; }
.hero-sub { animation-delay: 0.4s; }
.hero-btns { animation-delay: 0.55s; }
DATA Foundation
Community Center & Trade Hub
Chicago, Illinois — Est. MMXX
The FutureChicago
A community-centered trade hub empowering youth, families, and returning citizens with skills, support, and real pathways to purpose and prosperity.
Who We Are
More ThanA Movement.
The DATA Foundation Community Center & Trade Hub is designed to meet people where they are — and take them where they deserve to be.
We provide hands-on trade training, life skills, mentorship, and holistic support services that help individuals build careers, businesses, and better lives.
Built in partnership with leaders across Chicago, this initiative is part of a broader vision to create a diverse, innovative, world-class Chicago by investing in people first.
What We Offer
Programs Built
Trade Programs
3–10 Month Pathways
Barbering Cosmetology Esthetics & Nail Tech
Automotive & Diesel Mechanics HVAC & Appliance Repair
Welding & Manufacturing IT & Software Development
Culinary & Hospitality Medical Assistant & Healthcare
Leads directly to certification, employment, or entrepreneurship
Life Skills & Personal Development
Build the Whole Person
Financial Literacy & Credit Building Entrepreneurship & Business Development
Communication & Leadership Conflict Resolution & Emotional Intelligence
Job Readiness & Resume Building
Wrap-Around Support Services
Because Stability Matters
Housing Assistance Transportation Support
Mental Health Counseling Substance Abuse Support Food & Clothing Access
Success isn't just about skills — it's about stability.
Community Programs
Whole Community
Summer Camp & AAU Basketball Mentorship Programs
Community Events & Workshops Cooking & Wellness Classes
Your Transformation Pathway
12 Steps.
A proven model that ensures people don't just start — they finish and thrive.
01
Intake & Assessment
Foundation
03
Trade Alignment
Foundation
04
Training Plan
Foundation
06
Skill Development
Growth
09
Job Placement & Business Support
Launch
10
Continued Coaching
Launch
11
Community Integration
Legacy
12
Long-Term Success
Legacy
Real Results
The Numbers That Matter
17%
Recidivism Rate (vs national avg)
"Programs inside Cook County Jail — because transformation is possible anywhere, for anyone."
Why It Matters
Chicago Doesn't Need More Programs.Solutions .
This center doesn't just fill a gap. It becomes the answer Chicago has been waiting for — proven, scalable, and rooted in the community.
Reduces Crime & Recidivism By giving returning citizens a real path forward, we break cycles before they restart.
Creates Business Owners Entrepreneurship training turns program graduates into job creators in their own neighborhoods.
Builds Workforce Pipelines Employers get skilled, certified workers. Communities get stable livelihoods.
Strengthens Families Stable income, life skills, and mental health support reach the whole household.
Revitalizes Communities Investment in people becomes investment in blocks, schools, and neighborhood pride.
Invests in People First The most direct path to a world-class Chicago runs through its most overlooked residents.
Ways to Get Involved
Be Part of the Movement.
Whether you're here to learn, lead, give, or grow — there's a place for you in the DATA Foundation family.