mirror of
https://github.com/luxfi/foundation.git
synced 2026-10-30 16:55:49 +00:00
- Pure black #000 background - Inter font with tight letter-spacing - Large 72px stat numbers with animated counters - Minimal borders with subtle hover effects - Scroll-triggered fade-in animations - Grayscale partner logos - Clean team avatar circles - Refined whitespace and typography - Mobile-responsive design
1357 lines
42 KiB
HTML
1357 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lux Foundation - Advancing Decentralized Technology</title>
|
|
<meta name="description" content="The Lux Foundation supports research, grants, education, and open source development for decentralized technology.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background-color: #000;
|
|
color: #fff;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Utilities */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.text-gray {
|
|
color: #888;
|
|
}
|
|
|
|
.text-gray-dark {
|
|
color: #666;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.logo-text span {
|
|
color: #666;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: #888;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-cta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px 18px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #e5e5e5;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: #888;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
color: #fff;
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 14px 28px;
|
|
font-size: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 160px 0 120px;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 14px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 100px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #888;
|
|
margin-bottom: 32px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.hero-badge::before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #22c55e;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(48px, 8vw, 80px);
|
|
font-weight: 700;
|
|
line-height: 1.05;
|
|
margin-bottom: 24px;
|
|
letter-spacing: -0.03em;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 20px;
|
|
color: #888;
|
|
margin-bottom: 48px;
|
|
max-width: 600px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 48px;
|
|
padding: 80px 0;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 72px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1;
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Section Styles */
|
|
section {
|
|
padding: 120px 0;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
max-width: 700px;
|
|
margin: 0 auto 80px;
|
|
}
|
|
|
|
.section-tag {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #666;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(36px, 5vw, 56px);
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 18px;
|
|
color: #888;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Mission Section */
|
|
.mission {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mission-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
.mission-content h2 {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
margin-bottom: 32px;
|
|
line-height: 1.15;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.mission-content p {
|
|
font-size: 17px;
|
|
color: #888;
|
|
margin-bottom: 20px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.mission-visual {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mission-rings {
|
|
position: relative;
|
|
width: 320px;
|
|
height: 320px;
|
|
}
|
|
|
|
.mission-ring {
|
|
position: absolute;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
animation: rotate 30s linear infinite;
|
|
}
|
|
|
|
.mission-ring:nth-child(1) {
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.mission-ring:nth-child(2) {
|
|
width: 75%;
|
|
height: 75%;
|
|
top: 12.5%;
|
|
left: 12.5%;
|
|
animation-direction: reverse;
|
|
animation-duration: 20s;
|
|
}
|
|
|
|
.mission-ring:nth-child(3) {
|
|
width: 50%;
|
|
height: 50%;
|
|
top: 25%;
|
|
left: 25%;
|
|
animation-duration: 15s;
|
|
}
|
|
|
|
.mission-ring::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
top: -4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Focus Areas */
|
|
.focus-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.focus-card {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 48px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.focus-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.focus-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24px;
|
|
font-size: 24px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.focus-card h3 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.focus-card > p {
|
|
color: #888;
|
|
font-size: 15px;
|
|
margin-bottom: 28px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.focus-card ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.focus-card li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
color: #666;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.focus-card li:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
.focus-card li::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #444;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Team Section */
|
|
.team {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.team-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.team-card {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 32px 24px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.team-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.team-avatar {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
|
|
margin: 0 auto 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #888;
|
|
}
|
|
|
|
.team-card h4 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.team-card .role {
|
|
font-size: 13px;
|
|
color: #666;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.team-card .bio {
|
|
font-size: 13px;
|
|
color: #555;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.advisors-section {
|
|
padding-top: 48px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.advisors-title {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #666;
|
|
margin-bottom: 40px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.advisors-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 64px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.advisor {
|
|
text-align: center;
|
|
}
|
|
|
|
.advisor-avatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #222 0%, #111 100%);
|
|
margin: 0 auto 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #666;
|
|
}
|
|
|
|
.advisor h5 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.advisor .org {
|
|
font-size: 12px;
|
|
color: #555;
|
|
}
|
|
|
|
/* Partners Section */
|
|
.partners-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.partner-logo {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
padding: 24px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 72px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.partner-logo:hover {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.partner-logo span {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #555;
|
|
filter: grayscale(100%);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.partner-logo:hover span {
|
|
color: #888;
|
|
}
|
|
|
|
.partners-cta {
|
|
text-align: center;
|
|
}
|
|
|
|
.partners-cta p {
|
|
color: #666;
|
|
margin-bottom: 20px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Get Involved Section */
|
|
.involved {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.involved-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.involved-card {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 48px 36px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.involved-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.involved-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin: 0 auto 24px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.involved-card h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.involved-card p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-bottom: 28px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Newsletter Section */
|
|
.newsletter {
|
|
padding: 100px 0;
|
|
}
|
|
|
|
.newsletter-box {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 80px 48px;
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter-content {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.newsletter h2 {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.newsletter p {
|
|
color: #666;
|
|
font-size: 16px;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.newsletter-form {
|
|
display: flex;
|
|
gap: 12px;
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.newsletter-form input {
|
|
flex: 1;
|
|
padding: 14px 18px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
outline: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.newsletter-form input::placeholder {
|
|
color: #555;
|
|
}
|
|
|
|
.newsletter-form input:focus {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: 64px 0 32px;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
|
|
gap: 48px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.footer-brand p {
|
|
color: #555;
|
|
font-size: 14px;
|
|
margin-top: 16px;
|
|
max-width: 280px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.footer-col h4 {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #555;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.footer-col ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-col li {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.footer-col a {
|
|
color: #666;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer-col a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 32px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.footer-bottom p {
|
|
color: #444;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.footer-social {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footer-social a {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #555;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer-social a:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.stats {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 56px;
|
|
}
|
|
|
|
.mission-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 64px;
|
|
}
|
|
|
|
.mission-visual {
|
|
order: -1;
|
|
}
|
|
|
|
.focus-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.team-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.partners-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links, .nav-cta {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: block;
|
|
}
|
|
|
|
.hero {
|
|
padding: 120px 0 80px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.hero-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stats {
|
|
grid-template-columns: 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 64px;
|
|
}
|
|
|
|
section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.team-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.involved-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.partners-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.advisors-grid {
|
|
gap: 32px;
|
|
}
|
|
|
|
.newsletter-box {
|
|
padding: 48px 24px;
|
|
}
|
|
|
|
.newsletter-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
|
|
.footer-bottom {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<div class="nav-container">
|
|
<a href="/" class="logo">
|
|
<div class="logo-icon">L</div>
|
|
<div class="logo-text">Lux <span>Foundation</span></div>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#mission">Mission</a>
|
|
<a href="#focus">Focus Areas</a>
|
|
<a href="#team">Team</a>
|
|
<a href="#partners">Partners</a>
|
|
</div>
|
|
<div class="nav-cta">
|
|
<a href="https://docs.lux.network" class="btn btn-secondary">Docs</a>
|
|
<a href="#involved" class="btn btn-primary">Apply for Grant</a>
|
|
</div>
|
|
<button class="mobile-menu-btn">☰</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-badge fade-in">Non-Profit Foundation</div>
|
|
<h1 class="fade-in">Advancing Decentralized Technology for Everyone</h1>
|
|
<p class="fade-in">The Lux Foundation supports groundbreaking research, funds innovative projects, and builds educational resources to accelerate adoption worldwide.</p>
|
|
<div class="hero-buttons fade-in">
|
|
<a href="#involved" class="btn btn-primary btn-large">Apply for a Grant</a>
|
|
<a href="https://lux.network" class="btn btn-secondary btn-large">Explore Lux Network</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section style="padding-top: 0;">
|
|
<div class="container">
|
|
<div class="stats fade-in">
|
|
<div class="stat">
|
|
<div class="stat-value" data-value="50" data-prefix="$" data-suffix="M+">$0M+</div>
|
|
<div class="stat-label">Total Funded</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" data-value="100" data-prefix="" data-suffix="+">0+</div>
|
|
<div class="stat-label">Grants Awarded</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" data-value="500" data-prefix="" data-suffix="+">0+</div>
|
|
<div class="stat-label">Developers Supported</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mission Section -->
|
|
<section class="mission" id="mission">
|
|
<div class="container">
|
|
<div class="mission-grid">
|
|
<div class="mission-content fade-in">
|
|
<span class="section-tag">Our Mission</span>
|
|
<h2>Building the Infrastructure for a Decentralized Future</h2>
|
|
<p>The Lux Foundation is a non-profit organization dedicated to fostering the growth and adoption of decentralized technologies. We believe in a future where individuals have greater control over their data, assets, and digital interactions.</p>
|
|
<p>Through strategic grants, cutting-edge research, comprehensive education, and open-source development, we're building the foundation for Web3 and beyond.</p>
|
|
<p>Our work spans consensus mechanisms, post-quantum cryptography, cross-chain interoperability, and developer tooling - all designed to make decentralized technology more accessible, secure, and scalable.</p>
|
|
</div>
|
|
<div class="mission-visual fade-in">
|
|
<div class="mission-rings">
|
|
<div class="mission-ring"></div>
|
|
<div class="mission-ring"></div>
|
|
<div class="mission-ring"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Focus Areas Section -->
|
|
<section id="focus">
|
|
<div class="container">
|
|
<div class="section-header fade-in">
|
|
<span class="section-tag">Focus Areas</span>
|
|
<h2 class="section-title">Where We Make Impact</h2>
|
|
<p class="section-desc">Our four pillars of support drive innovation across the decentralized ecosystem.</p>
|
|
</div>
|
|
<div class="focus-grid">
|
|
<div class="focus-card fade-in">
|
|
<div class="focus-icon">🔬</div>
|
|
<h3>Research</h3>
|
|
<p>Advancing the theoretical and practical foundations of blockchain technology through academic partnerships and internal research initiatives.</p>
|
|
<ul>
|
|
<li>Consensus mechanism optimization</li>
|
|
<li>Post-quantum cryptography</li>
|
|
<li>Scalability solutions</li>
|
|
<li>Privacy-preserving technologies</li>
|
|
</ul>
|
|
</div>
|
|
<div class="focus-card fade-in">
|
|
<div class="focus-icon">💰</div>
|
|
<h3>Grants</h3>
|
|
<p>Funding innovative projects that push the boundaries of what's possible with decentralized technology.</p>
|
|
<ul>
|
|
<li>Infrastructure development</li>
|
|
<li>DeFi protocols</li>
|
|
<li>Developer tooling</li>
|
|
<li>Community initiatives</li>
|
|
</ul>
|
|
</div>
|
|
<div class="focus-card fade-in">
|
|
<div class="focus-icon">🎓</div>
|
|
<h3>Education</h3>
|
|
<p>Creating comprehensive learning resources and programs to onboard the next generation of Web3 builders.</p>
|
|
<ul>
|
|
<li>Developer bootcamps</li>
|
|
<li>University partnerships</li>
|
|
<li>Documentation & tutorials</li>
|
|
<li>Workshops & conferences</li>
|
|
</ul>
|
|
</div>
|
|
<div class="focus-card fade-in">
|
|
<div class="focus-icon">💻</div>
|
|
<h3>Open Source</h3>
|
|
<p>Building and maintaining critical open-source infrastructure that benefits the entire ecosystem.</p>
|
|
<ul>
|
|
<li>Core protocol development</li>
|
|
<li>SDK & libraries</li>
|
|
<li>Security auditing tools</li>
|
|
<li>Testing frameworks</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Section -->
|
|
<section class="team" id="team">
|
|
<div class="container">
|
|
<div class="section-header fade-in">
|
|
<span class="section-tag">Our Team</span>
|
|
<h2 class="section-title">Leadership & Advisors</h2>
|
|
<p class="section-desc">Experienced leaders from blockchain, academia, and technology driving our mission forward.</p>
|
|
</div>
|
|
<div class="team-grid">
|
|
<div class="team-card fade-in">
|
|
<div class="team-avatar">ZS</div>
|
|
<h4>Zach Sarette</h4>
|
|
<div class="role">Executive Director</div>
|
|
<div class="bio">Former CTO at Hanzo AI. 15+ years in distributed systems.</div>
|
|
</div>
|
|
<div class="team-card fade-in">
|
|
<div class="team-avatar">AK</div>
|
|
<h4>Dr. Amir Kazemi</h4>
|
|
<div class="role">Research Director</div>
|
|
<div class="bio">PhD Cryptography, Stanford. Post-quantum security expert.</div>
|
|
</div>
|
|
<div class="team-card fade-in">
|
|
<div class="team-avatar">ML</div>
|
|
<h4>Maya Lin</h4>
|
|
<div class="role">Grants Director</div>
|
|
<div class="bio">Former Ethereum Foundation. 100+ projects funded.</div>
|
|
</div>
|
|
<div class="team-card fade-in">
|
|
<div class="team-avatar">JR</div>
|
|
<h4>James Rodriguez</h4>
|
|
<div class="role">Education Lead</div>
|
|
<div class="bio">Built Web3 curriculum for 50+ universities worldwide.</div>
|
|
</div>
|
|
</div>
|
|
<div class="advisors-section fade-in">
|
|
<h3 class="advisors-title">Advisory Board</h3>
|
|
<div class="advisors-grid">
|
|
<div class="advisor">
|
|
<div class="advisor-avatar">VB</div>
|
|
<h5>Dr. Victor Bell</h5>
|
|
<div class="org">MIT CSAIL</div>
|
|
</div>
|
|
<div class="advisor">
|
|
<div class="advisor-avatar">SC</div>
|
|
<h5>Sarah Chen</h5>
|
|
<div class="org">a16z crypto</div>
|
|
</div>
|
|
<div class="advisor">
|
|
<div class="advisor-avatar">MK</div>
|
|
<h5>Prof. Michael Kim</h5>
|
|
<div class="org">Berkeley Blockchain</div>
|
|
</div>
|
|
<div class="advisor">
|
|
<div class="advisor-avatar">EP</div>
|
|
<h5>Elena Petrov</h5>
|
|
<div class="org">Protocol Labs</div>
|
|
</div>
|
|
<div class="advisor">
|
|
<div class="advisor-avatar">DW</div>
|
|
<h5>David Wong</h5>
|
|
<div class="org">NCC Group</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section id="partners">
|
|
<div class="container">
|
|
<div class="section-header fade-in">
|
|
<span class="section-tag">Partners</span>
|
|
<h2 class="section-title">Trusted by Industry Leaders</h2>
|
|
<p class="section-desc">Collaborating with world-class organizations to advance decentralized technology.</p>
|
|
</div>
|
|
<div class="partners-grid fade-in">
|
|
<div class="partner-logo"><span>MIT</span></div>
|
|
<div class="partner-logo"><span>Stanford</span></div>
|
|
<div class="partner-logo"><span>Berkeley</span></div>
|
|
<div class="partner-logo"><span>Chainlink</span></div>
|
|
<div class="partner-logo"><span>Circle</span></div>
|
|
<div class="partner-logo"><span>Fireblocks</span></div>
|
|
<div class="partner-logo"><span>Ledger</span></div>
|
|
<div class="partner-logo"><span>OpenZeppelin</span></div>
|
|
<div class="partner-logo"><span>Trail of Bits</span></div>
|
|
<div class="partner-logo"><span>Electric Capital</span></div>
|
|
<div class="partner-logo"><span>Paradigm</span></div>
|
|
<div class="partner-logo"><span>Coinbase</span></div>
|
|
</div>
|
|
<div class="partners-cta fade-in">
|
|
<p>Interested in partnering with the Lux Foundation?</p>
|
|
<a href="mailto:[email protected]" class="btn btn-secondary">Become a Partner</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Get Involved Section -->
|
|
<section class="involved" id="involved">
|
|
<div class="container">
|
|
<div class="section-header fade-in">
|
|
<span class="section-tag">Get Involved</span>
|
|
<h2 class="section-title">Join Our Mission</h2>
|
|
<p class="section-desc">There are many ways to contribute to the decentralized future we're building together.</p>
|
|
</div>
|
|
<div class="involved-grid">
|
|
<div class="involved-card fade-in">
|
|
<div class="involved-icon">🚀</div>
|
|
<h3>Apply for a Grant</h3>
|
|
<p>Building something innovative? Apply for funding ranging from $10K to $1M+ for projects that advance decentralized technology.</p>
|
|
<a href="https://grants.lux.foundation" class="btn btn-primary">Apply Now</a>
|
|
</div>
|
|
<div class="involved-card fade-in">
|
|
<div class="involved-icon">👨‍💻</div>
|
|
<h3>Contribute Code</h3>
|
|
<p>Join our open-source community and help build the infrastructure that powers the decentralized web.</p>
|
|
<a href="https://github.com/luxfi" class="btn btn-secondary">View GitHub</a>
|
|
</div>
|
|
<div class="involved-card fade-in">
|
|
<div class="involved-icon">🌱</div>
|
|
<h3>Become a Fellow</h3>
|
|
<p>Our fellowship program supports researchers and builders working on breakthrough decentralized technologies.</p>
|
|
<a href="https://fellowship.lux.foundation" class="btn btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter Section -->
|
|
<section class="newsletter">
|
|
<div class="container">
|
|
<div class="newsletter-box fade-in">
|
|
<div class="newsletter-content">
|
|
<h2>Stay in the Loop</h2>
|
|
<p>Get the latest updates on grants, research, and events from the Lux Foundation.</p>
|
|
<form class="newsletter-form">
|
|
<input type="email" placeholder="Enter your email" required>
|
|
<button type="submit" class="btn btn-primary">Subscribe</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="/" class="logo">
|
|
<div class="logo-icon">L</div>
|
|
<div class="logo-text">Lux <span>Foundation</span></div>
|
|
</a>
|
|
<p>A non-profit organization dedicated to advancing decentralized technology for the benefit of humanity.</p>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Foundation</h4>
|
|
<ul>
|
|
<li><a href="#mission">Mission</a></li>
|
|
<li><a href="#team">Team</a></li>
|
|
<li><a href="#partners">Partners</a></li>
|
|
<li><a href="/careers">Careers</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Programs</h4>
|
|
<ul>
|
|
<li><a href="https://grants.lux.foundation">Grants</a></li>
|
|
<li><a href="https://fellowship.lux.foundation">Fellowship</a></li>
|
|
<li><a href="/research">Research</a></li>
|
|
<li><a href="/education">Education</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Resources</h4>
|
|
<ul>
|
|
<li><a href="https://docs.lux.network">Documentation</a></li>
|
|
<li><a href="https://github.com/luxfi">GitHub</a></li>
|
|
<li><a href="/blog">Blog</a></li>
|
|
<li><a href="/press">Press Kit</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Network</h4>
|
|
<ul>
|
|
<li><a href="https://lux.network">Lux Network</a></li>
|
|
<li><a href="https://explorer.lux.network">Explorer</a></li>
|
|
<li><a href="https://bridge.lux.network">Bridge</a></li>
|
|
<li><a href="https://wallet.lux.network">Wallet</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Lux Foundation. All rights reserved.</p>
|
|
<div class="footer-social">
|
|
<a href="https://twitter.com/luxfi" title="Twitter">X</a>
|
|
<a href="https://github.com/luxfi" title="GitHub">GH</a>
|
|
<a href="https://discord.gg/luxfi" title="Discord">DC</a>
|
|
<a href="https://t.me/luxfi" title="Telegram">TG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Intersection Observer for fade-in animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Animate stat numbers
|
|
const animateValue = (element, start, end, duration, prefix, suffix) => {
|
|
let startTimestamp = null;
|
|
const step = (timestamp) => {
|
|
if (!startTimestamp) startTimestamp = timestamp;
|
|
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
|
const value = Math.floor(easeOutQuart * (end - start) + start);
|
|
element.textContent = prefix + value + suffix;
|
|
if (progress < 1) {
|
|
window.requestAnimationFrame(step);
|
|
}
|
|
};
|
|
window.requestAnimationFrame(step);
|
|
};
|
|
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const statValues = entry.target.querySelectorAll('.stat-value');
|
|
statValues.forEach(stat => {
|
|
const value = parseInt(stat.dataset.value);
|
|
const prefix = stat.dataset.prefix || '';
|
|
const suffix = stat.dataset.suffix || '';
|
|
animateValue(stat, 0, value, 2000, prefix, suffix);
|
|
});
|
|
statsObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
const statsSection = document.querySelector('.stats');
|
|
if (statsSection) {
|
|
statsObserver.observe(statsSection);
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Newsletter form handling
|
|
document.querySelector('.newsletter-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const email = this.querySelector('input').value;
|
|
alert('Thank you for subscribing! We\'ll keep you updated.');
|
|
this.reset();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|