| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>The Shampoo Foundation — Funding the Future of Machine Learning</title> |
| <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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --color-bg: #FFFCF9; |
| --color-bg-warm: #FBF8F4; |
| --color-bg-cream: #F7F3ED; |
| --color-bg-dark: #1C1917; |
| --color-text: #1C1917; |
| --color-text-secondary: #78716C; |
| --color-text-light: #A8A29E; |
| --color-accent: #B45309; |
| --color-accent-warm: #D97706; |
| --color-accent-light: #FEF3C7; |
| --color-border: #E7E5E4; |
| --color-border-light: #F5F5F4; |
| --font-serif: 'Fraunces', Georgia, serif; |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| } |
| |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| html { |
| scroll-behavior: smooth; |
| } |
| |
| body { |
| font-family: var(--font-sans); |
| background-color: var(--color-bg); |
| color: var(--color-text); |
| line-height: 1.7; |
| font-size: 16px; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| overflow-x: hidden; |
| } |
| |
| ::selection { |
| background: var(--color-accent-light); |
| color: var(--color-accent); |
| } |
| |
| |
| nav { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 100; |
| padding: 1.25rem 4rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background: rgba(255, 252, 249, 0.8); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| nav.scrolled { |
| padding: 1rem 4rem; |
| box-shadow: 0 1px 0 var(--color-border); |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-family: var(--font-serif); |
| font-size: 1.15rem; |
| font-weight: 500; |
| letter-spacing: -0.02em; |
| color: var(--color-text); |
| text-decoration: none; |
| } |
| |
| .logo-mark { |
| width: 32px; |
| height: 32px; |
| background: linear-gradient(135deg, var(--color-accent-warm) 0%, var(--color-accent) 100%); |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: 600; |
| font-size: 0.9rem; |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 3rem; |
| list-style: none; |
| } |
| |
| .nav-links a { |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: var(--color-text-secondary); |
| text-decoration: none; |
| transition: color 0.2s ease; |
| position: relative; |
| } |
| |
| .nav-links a::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 0; |
| width: 0; |
| height: 1.5px; |
| background: var(--color-accent); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-links a:hover { |
| color: var(--color-text); |
| } |
| |
| .nav-links a:hover::after { |
| width: 100%; |
| } |
| |
| .nav-cta { |
| padding: 0.625rem 1.5rem; |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: white; |
| background: var(--color-text); |
| border: none; |
| border-radius: 100px; |
| text-decoration: none; |
| transition: all 0.2s ease; |
| } |
| |
| .nav-cta:hover { |
| background: #292524; |
| transform: translateY(-1px); |
| } |
| |
| |
| .hero { |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| padding: 10rem 4rem 8rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero-bg { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: |
| radial-gradient(ellipse 80% 50% at 50% -10%, rgba(217, 119, 6, 0.08) 0%, transparent 50%), |
| radial-gradient(ellipse 60% 40% at 90% 20%, rgba(180, 83, 9, 0.05) 0%, transparent 40%), |
| radial-gradient(ellipse 50% 30% at 10% 60%, rgba(217, 119, 6, 0.04) 0%, transparent 40%); |
| pointer-events: none; |
| } |
| |
| .hero-grid { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-image: |
| linear-gradient(rgba(0,0,0,0.015) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0,0,0,0.015) 1px, transparent 1px); |
| background-size: 80px 80px; |
| mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); |
| -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); |
| pointer-events: none; |
| } |
| |
| .hero-content { |
| position: relative; |
| max-width: 900px; |
| } |
| |
| .hero-eyebrow { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.625rem; |
| margin-bottom: 2rem; |
| animation: fadeIn 1s ease-out; |
| } |
| |
| .hero-eyebrow span { |
| font-size: 0.8rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.15em; |
| color: var(--color-accent); |
| } |
| |
| .hero-eyebrow::before { |
| content: ''; |
| width: 40px; |
| height: 1px; |
| background: var(--color-accent); |
| } |
| |
| .hero h1 { |
| font-family: var(--font-serif); |
| font-size: clamp(3.5rem, 9vw, 6rem); |
| font-weight: 400; |
| line-height: 1.05; |
| letter-spacing: -0.03em; |
| margin-bottom: 2rem; |
| animation: fadeInUp 1s ease-out 0.1s both; |
| } |
| |
| .hero h1 em { |
| font-style: italic; |
| color: var(--color-accent); |
| } |
| |
| .hero-description { |
| font-size: 1.25rem; |
| font-weight: 300; |
| color: var(--color-text-secondary); |
| max-width: 580px; |
| line-height: 1.8; |
| margin-bottom: 3rem; |
| animation: fadeInUp 1s ease-out 0.2s both; |
| } |
| |
| .hero-stats { |
| display: flex; |
| gap: 4rem; |
| padding-top: 3rem; |
| border-top: 1px solid var(--color-border); |
| animation: fadeInUp 1s ease-out 0.3s both; |
| } |
| |
| .hero-stat { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .hero-stat-value { |
| font-family: var(--font-serif); |
| font-size: 3rem; |
| font-weight: 300; |
| letter-spacing: -0.02em; |
| color: var(--color-text); |
| line-height: 1; |
| margin-bottom: 0.5rem; |
| } |
| |
| .hero-stat-value .currency { |
| font-size: 1.75rem; |
| vertical-align: super; |
| margin-right: 0.125rem; |
| } |
| |
| .hero-stat-label { |
| font-size: 0.875rem; |
| color: var(--color-text-secondary); |
| } |
| |
| |
| .mission { |
| padding: 10rem 4rem; |
| background: var(--color-bg-cream); |
| position: relative; |
| } |
| |
| .mission-container { |
| max-width: 1400px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: 1fr 1.2fr; |
| gap: 8rem; |
| align-items: center; |
| } |
| |
| .mission-content { |
| max-width: 480px; |
| } |
| |
| .section-label { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.15em; |
| color: var(--color-accent); |
| margin-bottom: 1.5rem; |
| } |
| |
| .section-label::before { |
| content: ''; |
| width: 8px; |
| height: 8px; |
| background: var(--color-accent); |
| border-radius: 50%; |
| } |
| |
| .section-title { |
| font-family: var(--font-serif); |
| font-size: clamp(2.25rem, 4vw, 3rem); |
| font-weight: 400; |
| line-height: 1.2; |
| letter-spacing: -0.02em; |
| margin-bottom: 1.5rem; |
| } |
| |
| .section-text { |
| font-size: 1.0625rem; |
| color: var(--color-text-secondary); |
| line-height: 1.8; |
| margin-bottom: 1.5rem; |
| } |
| |
| .mission-visual { |
| position: relative; |
| } |
| |
| .mission-card-stack { |
| position: relative; |
| height: 500px; |
| } |
| |
| .mission-card { |
| position: absolute; |
| background: white; |
| border-radius: 24px; |
| padding: 2.5rem; |
| box-shadow: 0 4px 60px rgba(0, 0, 0, 0.06); |
| transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .mission-card:nth-child(1) { |
| width: 340px; |
| top: 0; |
| left: 0; |
| z-index: 3; |
| } |
| |
| .mission-card:nth-child(2) { |
| width: 300px; |
| top: 60px; |
| left: 200px; |
| z-index: 2; |
| } |
| |
| .mission-card:nth-child(3) { |
| width: 280px; |
| top: 280px; |
| left: 80px; |
| z-index: 1; |
| } |
| |
| .mission-card:hover { |
| transform: translateY(-8px); |
| } |
| |
| .mission-card-icon { |
| width: 56px; |
| height: 56px; |
| background: linear-gradient(135deg, var(--color-accent-light) 0%, #FEF9E7 100%); |
| border-radius: 16px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .mission-card h4 { |
| font-family: var(--font-serif); |
| font-size: 1.25rem; |
| font-weight: 500; |
| margin-bottom: 0.75rem; |
| } |
| |
| .mission-card p { |
| font-size: 0.9375rem; |
| color: var(--color-text-secondary); |
| line-height: 1.7; |
| } |
| |
| |
| .algorithm { |
| padding: 10rem 4rem; |
| background: var(--color-bg); |
| overflow: hidden; |
| } |
| |
| .algorithm-container { |
| max-width: 1300px; |
| margin: 0 auto; |
| } |
| |
| .algorithm-header { |
| text-align: center; |
| max-width: 700px; |
| margin: 0 auto 5rem; |
| } |
| |
| .algorithm-visual { |
| background: white; |
| border: 1px solid var(--color-border); |
| border-radius: 24px; |
| padding: 3rem; |
| margin-bottom: 4rem; |
| box-shadow: 0 4px 60px rgba(0, 0, 0, 0.04); |
| } |
| |
| .algorithm-svg { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| |
| .algorithm-comparison { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 2rem; |
| margin-bottom: 4rem; |
| } |
| |
| .comparison-card { |
| background: white; |
| border: 1px solid var(--color-border); |
| border-radius: 20px; |
| padding: 2.5rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .comparison-card.highlight { |
| border-color: var(--color-accent-light); |
| background: linear-gradient(135deg, white 0%, #FFFBF5 100%); |
| } |
| |
| .comparison-card.highlight::before { |
| content: 'SHAMPOO'; |
| position: absolute; |
| top: 1.5rem; |
| right: 1.5rem; |
| font-size: 0.65rem; |
| font-weight: 700; |
| letter-spacing: 0.1em; |
| color: var(--color-accent); |
| background: var(--color-accent-light); |
| padding: 0.25rem 0.75rem; |
| border-radius: 100px; |
| } |
| |
| .comparison-card h4 { |
| font-family: var(--font-serif); |
| font-size: 1.25rem; |
| font-weight: 500; |
| margin-bottom: 1rem; |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| } |
| |
| .comparison-card h4 .icon { |
| width: 32px; |
| height: 32px; |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1rem; |
| } |
| |
| .comparison-card:not(.highlight) h4 .icon { |
| background: var(--color-bg-cream); |
| } |
| |
| .comparison-card.highlight h4 .icon { |
| background: var(--color-accent-light); |
| } |
| |
| .comparison-card p { |
| font-size: 0.9375rem; |
| color: var(--color-text-secondary); |
| line-height: 1.7; |
| margin-bottom: 1.5rem; |
| } |
| |
| .comparison-card .metric { |
| display: flex; |
| align-items: baseline; |
| gap: 0.5rem; |
| padding-top: 1rem; |
| border-top: 1px solid var(--color-border); |
| } |
| |
| .comparison-card .metric-value { |
| font-family: var(--font-serif); |
| font-size: 2rem; |
| font-weight: 400; |
| color: var(--color-text); |
| } |
| |
| .comparison-card.highlight .metric-value { |
| color: var(--color-accent); |
| } |
| |
| .comparison-card .metric-label { |
| font-size: 0.875rem; |
| color: var(--color-text-secondary); |
| } |
| |
| .algorithm-steps { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 1.5rem; |
| } |
| |
| .algorithm-step { |
| text-align: center; |
| position: relative; |
| } |
| |
| .algorithm-step::after { |
| content: '→'; |
| position: absolute; |
| right: -1rem; |
| top: 2.5rem; |
| font-size: 1.5rem; |
| color: var(--color-border); |
| } |
| |
| .algorithm-step:last-child::after { |
| display: none; |
| } |
| |
| .step-icon { |
| width: 80px; |
| height: 80px; |
| margin: 0 auto 1.25rem; |
| background: var(--color-bg-cream); |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 2rem; |
| transition: all 0.3s ease; |
| } |
| |
| .algorithm-step:hover .step-icon { |
| background: var(--color-accent-light); |
| transform: translateY(-4px); |
| } |
| |
| .algorithm-step h5 { |
| font-family: var(--font-serif); |
| font-size: 1.0625rem; |
| font-weight: 500; |
| margin-bottom: 0.5rem; |
| } |
| |
| .algorithm-step p { |
| font-size: 0.8125rem; |
| color: var(--color-text-secondary); |
| line-height: 1.6; |
| } |
| |
| .equation-box { |
| background: var(--color-bg-dark); |
| border-radius: 16px; |
| padding: 2.5rem 3rem; |
| text-align: center; |
| margin-top: 3rem; |
| } |
| |
| .equation-box .equation { |
| font-family: 'Times New Roman', Georgia, serif; |
| font-size: 1.75rem; |
| color: white; |
| letter-spacing: 0.02em; |
| margin-bottom: 1rem; |
| } |
| |
| .equation-box .equation-label { |
| font-size: 0.875rem; |
| color: rgba(255, 255, 255, 0.5); |
| } |
| |
| |
| .banksy { |
| padding: 0; |
| position: relative; |
| background: #1a1a1a; |
| overflow: hidden; |
| min-height: 100vh; |
| } |
| |
| .banksy-wall { |
| position: absolute; |
| inset: 0; |
| background: |
| url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"), |
| linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 50%, #0d0d0d 100%); |
| background-blend-mode: overlay; |
| opacity: 0.9; |
| } |
| |
| .banksy-bricks { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(to right, #333 1px, transparent 1px), |
| linear-gradient(to bottom, #333 1px, transparent 1px), |
| linear-gradient(to bottom, transparent 49%, #292929 49%, #292929 51%, transparent 51%); |
| background-size: 120px 40px, 120px 40px, 240px 80px; |
| background-position: 0 0, 0 0, 60px 0; |
| opacity: 0.3; |
| } |
| |
| .banksy-content { |
| position: relative; |
| z-index: 1; |
| padding: 6rem 4rem; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .banksy-header { |
| margin-bottom: 4rem; |
| } |
| |
| .banksy-title { |
| font-family: 'Courier New', monospace; |
| font-size: clamp(3rem, 10vw, 8rem); |
| font-weight: 900; |
| color: white; |
| text-transform: uppercase; |
| letter-spacing: -0.05em; |
| line-height: 0.9; |
| position: relative; |
| display: inline-block; |
| } |
| |
| .banksy-title::before { |
| content: ''; |
| position: absolute; |
| bottom: 0.1em; |
| left: 0; |
| right: 0; |
| height: 0.15em; |
| background: #ff0000; |
| transform: skewX(-12deg); |
| } |
| |
| .banksy-subtitle { |
| font-family: 'Courier New', monospace; |
| font-size: 1rem; |
| color: #888; |
| text-transform: uppercase; |
| letter-spacing: 0.3em; |
| margin-top: 1rem; |
| } |
| |
| .stencil-container { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 3rem; |
| margin-bottom: 4rem; |
| } |
| |
| .stencil-card { |
| background: transparent; |
| position: relative; |
| } |
| |
| .stencil-card::before { |
| content: ''; |
| position: absolute; |
| inset: -10px; |
| background: rgba(255,255,255,0.02); |
| border: 2px dashed rgba(255,255,255,0.1); |
| transform: rotate(-1deg); |
| } |
| |
| .spray-text { |
| font-family: 'Arial Black', sans-serif; |
| font-size: 2rem; |
| font-weight: 900; |
| color: white; |
| text-transform: uppercase; |
| position: relative; |
| display: inline-block; |
| padding: 0.5rem 0; |
| } |
| |
| .spray-text.red { |
| color: #ff0000; |
| } |
| |
| .spray-text.yellow { |
| color: #ffcc00; |
| } |
| |
| .spray-text::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 0; |
| width: 100%; |
| height: 20px; |
| background: linear-gradient(180deg, currentColor 0%, transparent 100%); |
| opacity: 0.3; |
| filter: blur(3px); |
| } |
| |
| .drip { |
| position: relative; |
| } |
| |
| .drip::after { |
| content: ''; |
| position: absolute; |
| bottom: -30px; |
| left: 20%; |
| width: 3px; |
| height: 30px; |
| background: linear-gradient(180deg, currentColor 0%, transparent 100%); |
| border-radius: 0 0 3px 3px; |
| } |
| |
| .stencil-body { |
| font-family: 'Courier New', monospace; |
| font-size: 1rem; |
| color: #aaa; |
| line-height: 1.8; |
| margin-top: 1.5rem; |
| } |
| |
| .stencil-body strong { |
| color: white; |
| font-weight: normal; |
| background: rgba(255,0,0,0.3); |
| padding: 0 0.25rem; |
| } |
| |
| |
| .banksy-rat { |
| position: absolute; |
| right: 5%; |
| top: 15%; |
| width: 200px; |
| height: auto; |
| opacity: 0.9; |
| filter: drop-shadow(0 0 20px rgba(0,0,0,0.5)); |
| transform: scaleX(-1); |
| } |
| |
| |
| .graffiti-equation { |
| background: rgba(0,0,0,0.5); |
| border-left: 4px solid #ff0000; |
| padding: 2rem 3rem; |
| margin: 3rem 0; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .graffiti-equation::before { |
| content: 'THE FORMULA THEY DON\'T WANT YOU TO KNOW'; |
| position: absolute; |
| top: -0.5rem; |
| left: 2rem; |
| font-family: 'Courier New', monospace; |
| font-size: 0.7rem; |
| color: #ff0000; |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| background: #1a1a1a; |
| padding: 0 0.5rem; |
| } |
| |
| .graffiti-equation .eq { |
| font-family: 'Times New Roman', serif; |
| font-size: 2.5rem; |
| color: white; |
| letter-spacing: 0.05em; |
| } |
| |
| .graffiti-equation .eq .highlight { |
| color: #ff0000; |
| position: relative; |
| } |
| |
| .graffiti-equation .eq .highlight::after { |
| content: ''; |
| position: absolute; |
| left: -5px; |
| right: -5px; |
| bottom: 0; |
| height: 3px; |
| background: #ff0000; |
| } |
| |
| |
| .manifesto { |
| margin: 4rem 0; |
| padding: 0; |
| list-style: none; |
| } |
| |
| .manifesto li { |
| font-family: 'Courier New', monospace; |
| font-size: 1.25rem; |
| color: white; |
| padding: 1rem 0; |
| border-bottom: 1px solid rgba(255,255,255,0.1); |
| position: relative; |
| padding-left: 3rem; |
| } |
| |
| .manifesto li::before { |
| content: '✗'; |
| position: absolute; |
| left: 0; |
| color: #ff0000; |
| font-size: 1.5rem; |
| } |
| |
| .manifesto li.yes::before { |
| content: '✓'; |
| color: #00ff00; |
| } |
| |
| .manifesto li span { |
| color: #666; |
| font-size: 0.9rem; |
| display: block; |
| margin-top: 0.25rem; |
| } |
| |
| |
| .stencil-svg { |
| width: 100%; |
| max-width: 600px; |
| margin: 2rem auto; |
| display: block; |
| } |
| |
| |
| .splatter { |
| position: absolute; |
| width: 150px; |
| height: 150px; |
| background: radial-gradient(circle at center, #ff0000 0%, transparent 70%); |
| opacity: 0.1; |
| filter: blur(20px); |
| pointer-events: none; |
| } |
| |
| .splatter-1 { top: 10%; left: 5%; } |
| .splatter-2 { top: 60%; right: 10%; transform: scale(1.5); } |
| .splatter-3 { bottom: 20%; left: 30%; transform: scale(0.8); } |
| |
| |
| .banksy-quote { |
| font-family: 'Arial Black', sans-serif; |
| font-size: clamp(1.5rem, 4vw, 2.5rem); |
| color: white; |
| text-align: center; |
| margin: 4rem 0; |
| padding: 3rem; |
| position: relative; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| line-height: 1.4; |
| } |
| |
| .banksy-quote::before, |
| .banksy-quote::after { |
| content: ''; |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 100px; |
| height: 2px; |
| background: #ff0000; |
| } |
| |
| .banksy-quote::before { top: 0; } |
| .banksy-quote::after { bottom: 0; } |
| |
| .banksy-quote .author { |
| display: block; |
| font-family: 'Courier New', monospace; |
| font-size: 0.875rem; |
| color: #666; |
| text-transform: none; |
| letter-spacing: 0.1em; |
| margin-top: 1.5rem; |
| } |
| |
| |
| .versus { |
| display: grid; |
| grid-template-columns: 1fr auto 1fr; |
| gap: 2rem; |
| align-items: center; |
| margin: 4rem 0; |
| } |
| |
| .versus-side { |
| text-align: center; |
| padding: 2rem; |
| } |
| |
| .versus-side.old { |
| opacity: 0.5; |
| text-decoration: line-through; |
| text-decoration-color: #ff0000; |
| text-decoration-thickness: 3px; |
| } |
| |
| .versus-side h4 { |
| font-family: 'Arial Black', sans-serif; |
| font-size: 1.5rem; |
| color: white; |
| text-transform: uppercase; |
| margin-bottom: 1rem; |
| } |
| |
| .versus-side.old h4 { |
| color: #666; |
| } |
| |
| .versus-side p { |
| font-family: 'Courier New', monospace; |
| font-size: 3rem; |
| color: #ff0000; |
| font-weight: bold; |
| } |
| |
| .versus-side.new p { |
| color: #00ff00; |
| } |
| |
| .versus-divider { |
| font-family: 'Arial Black', sans-serif; |
| font-size: 2rem; |
| color: white; |
| padding: 1rem; |
| background: #ff0000; |
| border-radius: 50%; |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| |
| .banksy-footer { |
| text-align: center; |
| padding: 4rem 0 2rem; |
| border-top: 1px solid rgba(255,255,255,0.1); |
| margin-top: 4rem; |
| } |
| |
| .banksy-footer p { |
| font-family: 'Courier New', monospace; |
| font-size: 0.8rem; |
| color: #444; |
| text-transform: uppercase; |
| letter-spacing: 0.2em; |
| } |
| |
| @media (max-width: 768px) { |
| .stencil-container { |
| grid-template-columns: 1fr; |
| } |
| |
| .versus { |
| grid-template-columns: 1fr; |
| gap: 1rem; |
| } |
| |
| .versus-divider { |
| transform: rotate(90deg); |
| } |
| |
| .banksy-content { |
| padding: 4rem 1.5rem; |
| } |
| |
| .banksy-rat { |
| width: 100px; |
| top: 5%; |
| right: 2%; |
| opacity: 0.5; |
| } |
| } |
| |
| |
| .arcade { |
| padding: 4rem 2rem; |
| background: #0a0a0a; |
| position: relative; |
| overflow: hidden; |
| min-height: 100vh; |
| } |
| |
| .arcade::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: |
| repeating-linear-gradient( |
| 0deg, |
| transparent, |
| transparent 2px, |
| rgba(0, 255, 255, 0.03) 2px, |
| rgba(0, 255, 255, 0.03) 4px |
| ); |
| pointer-events: none; |
| animation: scanlines 8s linear infinite; |
| } |
| |
| @keyframes scanlines { |
| 0% { transform: translateY(0); } |
| 100% { transform: translateY(4px); } |
| } |
| |
| .arcade-crt { |
| position: absolute; |
| inset: 0; |
| background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%); |
| pointer-events: none; |
| } |
| |
| .arcade-grid { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); |
| background-size: 50px 50px; |
| transform: perspective(500px) rotateX(60deg); |
| transform-origin: center top; |
| opacity: 0.5; |
| } |
| |
| .arcade-content { |
| position: relative; |
| z-index: 1; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| |
| .arcade-header { |
| text-align: center; |
| margin-bottom: 3rem; |
| } |
| |
| .arcade-title { |
| font-family: 'Impact', 'Arial Black', sans-serif; |
| font-size: clamp(3rem, 12vw, 10rem); |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: -0.02em; |
| line-height: 0.9; |
| background: linear-gradient(180deg, |
| #fff 0%, |
| #ff0 20%, |
| #f0f 40%, |
| #0ff 60%, |
| #0f0 80%, |
| #fff 100% |
| ); |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| filter: drop-shadow(0 0 10px #ff0) drop-shadow(0 0 20px #f0f) drop-shadow(0 0 40px #0ff); |
| animation: glitch 3s infinite; |
| position: relative; |
| } |
| |
| @keyframes glitch { |
| 0%, 90%, 100% { transform: translate(0); } |
| 91% { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 #f00) drop-shadow(-2px 0 #0ff); } |
| 92% { transform: translate(2px, -1px); } |
| 93% { transform: translate(-1px, 2px); filter: drop-shadow(2px 0 #0f0) drop-shadow(-2px 0 #f0f); } |
| 94% { transform: translate(1px, -2px); } |
| 95% { transform: translate(0); } |
| } |
| |
| .arcade-subtitle { |
| font-family: 'Courier New', monospace; |
| font-size: 1.25rem; |
| color: #0ff; |
| text-transform: uppercase; |
| letter-spacing: 0.5em; |
| margin-top: 1rem; |
| text-shadow: 0 0 10px #0ff; |
| animation: blink 1s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 49% { opacity: 1; } |
| 50%, 100% { opacity: 0.7; } |
| } |
| |
| .insert-coin { |
| font-family: 'Press Start 2P', 'Courier New', monospace; |
| font-size: 0.875rem; |
| color: #ff0; |
| margin-top: 2rem; |
| animation: pulse 1.5s ease-in-out infinite; |
| text-shadow: 0 0 10px #ff0; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.3; } |
| } |
| |
| |
| .fighter-select { |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| gap: 1rem; |
| margin: 3rem 0; |
| padding: 2rem; |
| background: linear-gradient(180deg, #1a0a2e 0%, #0a0a1a 100%); |
| border: 4px solid #f0f; |
| box-shadow: |
| 0 0 20px #f0f, |
| inset 0 0 60px rgba(255, 0, 255, 0.1); |
| position: relative; |
| } |
| |
| .fighter-select::before { |
| content: '>>> SELECT YOUR OPTIMIZER <<<'; |
| position: absolute; |
| top: -1.5rem; |
| left: 50%; |
| transform: translateX(-50%); |
| font-family: 'Courier New', monospace; |
| font-size: 0.875rem; |
| color: #0ff; |
| background: #0a0a1a; |
| padding: 0.25rem 1rem; |
| text-shadow: 0 0 10px #0ff; |
| letter-spacing: 0.1em; |
| } |
| |
| .fighter-card { |
| background: linear-gradient(180deg, #2a1a4a 0%, #1a0a2e 100%); |
| border: 2px solid #444; |
| padding: 1rem; |
| text-align: center; |
| position: relative; |
| transition: all 0.2s ease; |
| cursor: pointer; |
| clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); |
| } |
| |
| .fighter-card:hover, .fighter-card.selected { |
| border-color: #0ff; |
| box-shadow: 0 0 30px rgba(0, 255, 255, 0.5); |
| transform: scale(1.05); |
| } |
| |
| .fighter-card.selected::after { |
| content: 'P1'; |
| position: absolute; |
| top: 5px; |
| right: 5px; |
| font-family: 'Courier New', monospace; |
| font-size: 0.7rem; |
| color: #0a0a0a; |
| background: #0ff; |
| padding: 2px 6px; |
| font-weight: bold; |
| } |
| |
| .fighter-card.legendary { |
| border-color: #ff0; |
| background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0a 100%); |
| } |
| |
| .fighter-card.legendary::before { |
| content: '★ LEGENDARY ★'; |
| position: absolute; |
| top: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| font-family: 'Courier New', monospace; |
| font-size: 0.5rem; |
| color: #0a0a0a; |
| background: linear-gradient(90deg, #ff0, #fa0); |
| padding: 2px 8px; |
| white-space: nowrap; |
| } |
| |
| .fighter-avatar { |
| width: 80px; |
| height: 80px; |
| margin: 0 auto 1rem; |
| background: #0a0a1a; |
| border: 2px solid currentColor; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 2.5rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .fighter-card:nth-child(1) .fighter-avatar { border-color: #888; color: #888; } |
| .fighter-card:nth-child(2) .fighter-avatar { border-color: #f80; color: #f80; } |
| .fighter-card:nth-child(3) .fighter-avatar { border-color: #0f0; color: #0f0; } |
| .fighter-card:nth-child(4) .fighter-avatar { border-color: #08f; color: #08f; } |
| .fighter-card:nth-child(5) .fighter-avatar { border-color: #f08; color: #f08; } |
| |
| .fighter-card h4 { |
| font-family: 'Impact', sans-serif; |
| font-size: 1.1rem; |
| color: #fff; |
| text-transform: uppercase; |
| margin-bottom: 0.25rem; |
| text-shadow: 2px 2px 0 #000; |
| } |
| |
| .fighter-card .class { |
| font-family: 'Courier New', monospace; |
| font-size: 0.65rem; |
| color: #888; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| } |
| |
| |
| .battle-arena { |
| background: linear-gradient(180deg, #1a0a2e 0%, #0a0a1a 50%, #2a0a1a 100%); |
| border: 4px solid; |
| border-image: linear-gradient(90deg, #f0f, #0ff, #ff0, #0f0, #f0f) 1; |
| padding: 2rem; |
| margin: 2rem 0; |
| position: relative; |
| } |
| |
| .battle-arena::before { |
| content: 'ROUND 1 — FIGHT!'; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-family: 'Impact', sans-serif; |
| font-size: 4rem; |
| color: #ff0; |
| text-shadow: 4px 4px 0 #f00, -2px -2px 0 #0ff; |
| opacity: 0; |
| animation: fightIntro 3s ease-out forwards; |
| pointer-events: none; |
| z-index: 10; |
| } |
| |
| @keyframes fightIntro { |
| 0% { opacity: 1; transform: translate(-50%, -50%) scale(3); } |
| 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } |
| 80% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| |
| |
| .health-bars { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 2rem; |
| gap: 2rem; |
| } |
| |
| .health-bar-container { |
| flex: 1; |
| position: relative; |
| } |
| |
| .health-bar-container.right { |
| text-align: right; |
| } |
| |
| .health-bar-name { |
| font-family: 'Impact', sans-serif; |
| font-size: 1.5rem; |
| color: #fff; |
| text-transform: uppercase; |
| text-shadow: 2px 2px 0 #000; |
| margin-bottom: 0.5rem; |
| } |
| |
| .health-bar { |
| height: 30px; |
| background: #333; |
| border: 3px solid #fff; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .health-bar-fill { |
| height: 100%; |
| transition: width 1s ease; |
| } |
| |
| .health-bar-container:first-child .health-bar-fill { |
| background: linear-gradient(180deg, #0f0 0%, #080 50%, #0f0 100%); |
| width: 95%; |
| } |
| |
| .health-bar-container:last-child .health-bar-fill { |
| background: linear-gradient(180deg, #f00 0%, #800 50%, #f00 100%); |
| width: 35%; |
| float: right; |
| } |
| |
| .health-bar::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 50%; |
| background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%); |
| } |
| |
| |
| .vs-badge { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-family: 'Impact', sans-serif; |
| font-size: 2rem; |
| color: #ff0; |
| text-shadow: 0 0 20px #f00; |
| z-index: 5; |
| } |
| |
| |
| .battle-grid { |
| display: grid; |
| grid-template-columns: 1fr auto 1fr; |
| gap: 2rem; |
| align-items: start; |
| } |
| |
| .battle-fighter { |
| text-align: center; |
| } |
| |
| .battle-fighter.winner { |
| animation: winnerGlow 0.5s ease-in-out infinite alternate; |
| } |
| |
| @keyframes winnerGlow { |
| from { filter: drop-shadow(0 0 10px #0f0); } |
| to { filter: drop-shadow(0 0 30px #0f0); } |
| } |
| |
| .fighter-portrait { |
| width: 200px; |
| height: 200px; |
| margin: 0 auto 1.5rem; |
| background: linear-gradient(135deg, #2a1a4a 0%, #1a0a2e 100%); |
| border: 4px solid; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 6rem; |
| position: relative; |
| } |
| |
| .battle-fighter:first-child .fighter-portrait { |
| border-color: #0f0; |
| box-shadow: 0 0 30px rgba(0, 255, 0, 0.3); |
| } |
| |
| .battle-fighter:last-child .fighter-portrait { |
| border-color: #f00; |
| box-shadow: 0 0 30px rgba(255, 0, 0, 0.3); |
| } |
| |
| .fighter-portrait::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%); |
| } |
| |
| .fighter-name { |
| font-family: 'Impact', sans-serif; |
| font-size: 2rem; |
| color: #fff; |
| text-transform: uppercase; |
| text-shadow: 3px 3px 0 #000; |
| margin-bottom: 0.5rem; |
| } |
| |
| .fighter-title { |
| font-family: 'Courier New', monospace; |
| font-size: 0.75rem; |
| color: #0ff; |
| text-transform: uppercase; |
| letter-spacing: 0.2em; |
| margin-bottom: 1rem; |
| } |
| |
| |
| .stat-bars { |
| text-align: left; |
| padding: 1rem; |
| background: rgba(0,0,0,0.5); |
| border: 1px solid #444; |
| } |
| |
| .stat-row { |
| display: flex; |
| align-items: center; |
| margin-bottom: 0.75rem; |
| gap: 0.5rem; |
| } |
| |
| .stat-row:last-child { |
| margin-bottom: 0; |
| } |
| |
| .stat-label { |
| font-family: 'Courier New', monospace; |
| font-size: 0.7rem; |
| color: #888; |
| width: 60px; |
| text-transform: uppercase; |
| } |
| |
| .stat-bar { |
| flex: 1; |
| height: 12px; |
| background: #222; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .stat-bar-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #f00, #ff0, #0f0); |
| transition: width 0.5s ease; |
| } |
| |
| .stat-value { |
| font-family: 'Courier New', monospace; |
| font-size: 0.7rem; |
| color: #fff; |
| width: 30px; |
| text-align: right; |
| } |
| |
| |
| .special-moves { |
| margin-top: 1.5rem; |
| padding: 1rem; |
| background: rgba(255, 0, 255, 0.1); |
| border: 1px solid #f0f; |
| } |
| |
| .special-moves h5 { |
| font-family: 'Courier New', monospace; |
| font-size: 0.7rem; |
| color: #f0f; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| margin-bottom: 0.75rem; |
| } |
| |
| .move { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-bottom: 0.5rem; |
| font-family: 'Courier New', monospace; |
| font-size: 0.75rem; |
| } |
| |
| .move-keys { |
| display: flex; |
| gap: 2px; |
| } |
| |
| .key { |
| background: #333; |
| border: 1px solid #666; |
| padding: 2px 6px; |
| color: #fff; |
| font-size: 0.65rem; |
| border-radius: 2px; |
| } |
| |
| .move-name { |
| color: #ff0; |
| } |
| |
| |
| .battle-vs { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 2rem; |
| } |
| |
| .battle-vs-text { |
| font-family: 'Impact', sans-serif; |
| font-size: 5rem; |
| color: #fff; |
| text-shadow: |
| 0 0 10px #ff0, |
| 0 0 20px #f00, |
| 4px 4px 0 #000; |
| animation: vsPulse 1s ease-in-out infinite; |
| } |
| |
| @keyframes vsPulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.1); } |
| } |
| |
| |
| .combo-display { |
| position: absolute; |
| top: 50%; |
| right: 2rem; |
| transform: translateY(-50%); |
| text-align: right; |
| } |
| |
| .combo-number { |
| font-family: 'Impact', sans-serif; |
| font-size: 4rem; |
| color: #ff0; |
| text-shadow: 0 0 20px #f80; |
| line-height: 1; |
| } |
| |
| .combo-text { |
| font-family: 'Courier New', monospace; |
| font-size: 0.875rem; |
| color: #f80; |
| text-transform: uppercase; |
| letter-spacing: 0.2em; |
| } |
| |
| |
| .damage-numbers { |
| position: absolute; |
| font-family: 'Impact', sans-serif; |
| font-size: 2rem; |
| color: #f00; |
| text-shadow: 2px 2px 0 #000; |
| animation: damageFloat 1s ease-out forwards; |
| pointer-events: none; |
| } |
| |
| @keyframes damageFloat { |
| 0% { opacity: 1; transform: translateY(0) scale(1); } |
| 100% { opacity: 0; transform: translateY(-50px) scale(1.5); } |
| } |
| |
| |
| .winner-announcement { |
| text-align: center; |
| padding: 3rem; |
| margin-top: 2rem; |
| background: linear-gradient(180deg, rgba(0,255,0,0.1) 0%, transparent 100%); |
| border: 2px solid #0f0; |
| position: relative; |
| } |
| |
| .winner-announcement::before { |
| content: '🏆 WINNER 🏆'; |
| display: block; |
| font-family: 'Courier New', monospace; |
| font-size: 0.875rem; |
| color: #ff0; |
| letter-spacing: 0.3em; |
| margin-bottom: 1rem; |
| } |
| |
| .winner-announcement h3 { |
| font-family: 'Impact', sans-serif; |
| font-size: 3rem; |
| color: #0f0; |
| text-transform: uppercase; |
| text-shadow: 0 0 30px #0f0, 4px 4px 0 #000; |
| animation: winnerFlash 0.5s ease-in-out infinite alternate; |
| } |
| |
| @keyframes winnerFlash { |
| from { text-shadow: 0 0 30px #0f0, 4px 4px 0 #000; } |
| to { text-shadow: 0 0 60px #0f0, 0 0 100px #0f0, 4px 4px 0 #000; } |
| } |
| |
| .winner-announcement p { |
| font-family: 'Courier New', monospace; |
| font-size: 1rem; |
| color: #0ff; |
| margin-top: 1rem; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| .high-scores { |
| margin-top: 3rem; |
| background: #0a0a0a; |
| border: 3px solid #f0f; |
| padding: 1.5rem; |
| } |
| |
| .high-scores h4 { |
| font-family: 'Courier New', monospace; |
| font-size: 1rem; |
| color: #f0f; |
| text-align: center; |
| text-transform: uppercase; |
| letter-spacing: 0.3em; |
| margin-bottom: 1.5rem; |
| text-shadow: 0 0 10px #f0f; |
| } |
| |
| .score-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| |
| .score-table th, |
| .score-table td { |
| font-family: 'Courier New', monospace; |
| font-size: 0.875rem; |
| padding: 0.75rem 1rem; |
| text-align: left; |
| border-bottom: 1px solid #333; |
| } |
| |
| .score-table th { |
| color: #888; |
| text-transform: uppercase; |
| font-size: 0.7rem; |
| letter-spacing: 0.1em; |
| } |
| |
| .score-table td { |
| color: #fff; |
| } |
| |
| .score-table tr:hover td { |
| background: rgba(255, 0, 255, 0.1); |
| } |
| |
| .score-table .rank { |
| color: #ff0; |
| font-weight: bold; |
| } |
| |
| .score-table .optimizer-name { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .score-table .optimizer-name span { |
| font-size: 1.25rem; |
| } |
| |
| .score-table .score { |
| color: #0f0; |
| font-family: 'Impact', sans-serif; |
| font-size: 1.25rem; |
| } |
| |
| .score-table .special { |
| color: #0ff; |
| font-size: 0.75rem; |
| } |
| |
| |
| .arcade-credits { |
| text-align: center; |
| padding: 3rem 0; |
| border-top: 1px solid #333; |
| margin-top: 3rem; |
| } |
| |
| .arcade-credits p { |
| font-family: 'Courier New', monospace; |
| font-size: 0.75rem; |
| color: #444; |
| text-transform: uppercase; |
| letter-spacing: 0.2em; |
| } |
| |
| .arcade-credits .blink { |
| color: #0ff; |
| animation: blink 1s infinite; |
| } |
| |
| @media (max-width: 1024px) { |
| .fighter-select { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| |
| .battle-grid { |
| grid-template-columns: 1fr; |
| gap: 1rem; |
| } |
| |
| .battle-vs { |
| padding: 1rem; |
| } |
| |
| .battle-vs-text { |
| font-size: 3rem; |
| } |
| |
| .fighter-portrait { |
| width: 150px; |
| height: 150px; |
| font-size: 4rem; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .arcade { |
| padding: 2rem 1rem; |
| } |
| |
| .fighter-select { |
| grid-template-columns: repeat(2, 1fr); |
| padding: 1rem; |
| } |
| |
| .fighter-avatar { |
| width: 60px; |
| height: 60px; |
| font-size: 2rem; |
| } |
| |
| .health-bars { |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .battle-arena { |
| padding: 1rem; |
| } |
| |
| .combo-display { |
| display: none; |
| } |
| } |
| |
| |
| .pissarro { |
| padding: 8rem 4rem; |
| position: relative; |
| overflow: hidden; |
| background: linear-gradient(180deg, |
| #E8DED2 0%, |
| #F4EDE4 20%, |
| #EAE4D8 40%, |
| #D4C8B8 70%, |
| #C9BDA8 100% |
| ); |
| min-height: 100vh; |
| } |
| |
| .pissarro-sky { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 40%; |
| background: linear-gradient(180deg, |
| #B8C4D4 0%, |
| #C9D1DC 30%, |
| #DED8CE 70%, |
| #E8DED2 100% |
| ); |
| opacity: 0.8; |
| } |
| |
| |
| .pissarro-dots { |
| position: absolute; |
| inset: 0; |
| background-image: |
| radial-gradient(circle at 10% 20%, #8B9D7A 1px, transparent 1px), |
| radial-gradient(circle at 30% 15%, #A67C52 1px, transparent 1px), |
| radial-gradient(circle at 50% 25%, #7A8B6A 1px, transparent 1px), |
| radial-gradient(circle at 70% 10%, #9B8B7A 1px, transparent 1px), |
| radial-gradient(circle at 90% 22%, #8B7B6A 1px, transparent 1px), |
| radial-gradient(circle at 15% 45%, #6B8B5A 1px, transparent 1px), |
| radial-gradient(circle at 35% 55%, #AB9B8A 1px, transparent 1px), |
| radial-gradient(circle at 55% 40%, #7B9B6B 1px, transparent 1px), |
| radial-gradient(circle at 75% 50%, #8B8B7A 1px, transparent 1px), |
| radial-gradient(circle at 95% 42%, #9B7B5A 1px, transparent 1px), |
| radial-gradient(circle at 20% 70%, #5B7B4A 1px, transparent 1px), |
| radial-gradient(circle at 40% 80%, #BB9B7A 1px, transparent 1px), |
| radial-gradient(circle at 60% 75%, #6B7B5A 1px, transparent 1px), |
| radial-gradient(circle at 80% 85%, #AB8B6A 1px, transparent 1px), |
| radial-gradient(circle at 25% 90%, #7B6B5A 1px, transparent 1px); |
| background-size: |
| 80px 80px, 90px 90px, 70px 70px, 85px 85px, 75px 75px, |
| 95px 95px, 65px 65px, 88px 88px, 72px 72px, 82px 82px, |
| 78px 78px, 92px 92px, 68px 68px, 86px 86px, 76px 76px; |
| opacity: 0.4; |
| pointer-events: none; |
| } |
| |
| .pissarro-content { |
| position: relative; |
| z-index: 1; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .pissarro-header { |
| text-align: center; |
| margin-bottom: 5rem; |
| } |
| |
| .pissarro-title { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: clamp(2.5rem, 6vw, 4.5rem); |
| font-weight: 300; |
| font-style: italic; |
| color: #4A5568; |
| letter-spacing: -0.02em; |
| line-height: 1.2; |
| margin-bottom: 1rem; |
| text-shadow: 2px 2px 4px rgba(255,255,255,0.5); |
| } |
| |
| .pissarro-subtitle { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 1.125rem; |
| font-style: italic; |
| color: #718096; |
| max-width: 600px; |
| margin: 0 auto; |
| } |
| |
| |
| .landscape-canvas { |
| background: white; |
| border-radius: 8px; |
| box-shadow: |
| 0 0 0 8px #D4C4B0, |
| 0 0 0 10px #A69580, |
| 0 20px 60px rgba(0,0,0,0.15); |
| padding: 2rem; |
| margin-bottom: 4rem; |
| position: relative; |
| } |
| |
| .landscape-canvas::before { |
| content: 'Les Optimiseurs dans le Paysage de la Perte'; |
| position: absolute; |
| bottom: -2.5rem; |
| left: 50%; |
| transform: translateX(-50%); |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 0.875rem; |
| font-style: italic; |
| color: #8B7355; |
| white-space: nowrap; |
| } |
| |
| .landscape-svg { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| |
| |
| .optimizer-garden { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 2rem; |
| margin-top: 5rem; |
| } |
| |
| .optimizer-card { |
| background: linear-gradient(145deg, |
| rgba(255,255,255,0.9) 0%, |
| rgba(248,244,236,0.95) 100% |
| ); |
| border-radius: 12px; |
| padding: 2rem; |
| position: relative; |
| box-shadow: |
| 4px 4px 0 rgba(139,115,85,0.2), |
| 8px 8px 20px rgba(0,0,0,0.08); |
| border: 1px solid rgba(139,115,85,0.2); |
| transition: all 0.4s ease; |
| } |
| |
| .optimizer-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 4px; |
| border-radius: 12px 12px 0 0; |
| } |
| |
| .optimizer-card.shampoo::before { background: linear-gradient(90deg, #D4A574, #C49A6C); } |
| .optimizer-card.soap::before { background: linear-gradient(90deg, #7BA05B, #6B9B4B); } |
| .optimizer-card.muon::before { background: linear-gradient(90deg, #8B9DC3, #7B8DB3); } |
| .optimizer-card.caspr::before { background: linear-gradient(90deg, #C4849B, #B47488); } |
| |
| .optimizer-card:hover { |
| transform: translateY(-8px); |
| box-shadow: |
| 4px 4px 0 rgba(139,115,85,0.2), |
| 12px 12px 30px rgba(0,0,0,0.12); |
| } |
| |
| .optimizer-icon { |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| margin-bottom: 1.5rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .optimizer-card.shampoo .optimizer-icon { |
| background: linear-gradient(135deg, #F5E6D3 0%, #E8D4BC 100%); |
| border: 2px solid #D4A574; |
| } |
| .optimizer-card.soap .optimizer-icon { |
| background: linear-gradient(135deg, #E8F0E0 0%, #D4E8C8 100%); |
| border: 2px solid #7BA05B; |
| } |
| .optimizer-card.muon .optimizer-icon { |
| background: linear-gradient(135deg, #E8ECF4 0%, #D4DCE8 100%); |
| border: 2px solid #8B9DC3; |
| } |
| .optimizer-card.caspr .optimizer-icon { |
| background: linear-gradient(135deg, #F4E8EC 0%, #E8D4DC 100%); |
| border: 2px solid #C4849B; |
| } |
| |
| .optimizer-card h4 { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 1.5rem; |
| font-weight: 500; |
| color: #4A5568; |
| margin-bottom: 0.5rem; |
| } |
| |
| .optimizer-card .year { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 0.8rem; |
| font-style: italic; |
| color: #A0AEC0; |
| margin-bottom: 1rem; |
| } |
| |
| .optimizer-card p { |
| font-size: 0.9rem; |
| color: #718096; |
| line-height: 1.7; |
| margin-bottom: 1.25rem; |
| } |
| |
| .optimizer-card .equation { |
| font-family: 'Times New Roman', Georgia, serif; |
| font-size: 0.95rem; |
| color: #4A5568; |
| background: rgba(0,0,0,0.03); |
| padding: 0.75rem 1rem; |
| border-radius: 6px; |
| border-left: 3px solid; |
| margin-bottom: 1rem; |
| } |
| |
| .optimizer-card.shampoo .equation { border-color: #D4A574; } |
| .optimizer-card.soap .equation { border-color: #7BA05B; } |
| .optimizer-card.muon .equation { border-color: #8B9DC3; } |
| .optimizer-card.caspr .equation { border-color: #C4849B; } |
| |
| .optimizer-card .highlight-stat { |
| display: flex; |
| align-items: baseline; |
| gap: 0.5rem; |
| padding-top: 1rem; |
| border-top: 1px solid rgba(0,0,0,0.08); |
| } |
| |
| .optimizer-card .highlight-stat .value { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 1.75rem; |
| font-weight: 400; |
| } |
| |
| .optimizer-card.shampoo .highlight-stat .value { color: #C49A6C; } |
| .optimizer-card.soap .highlight-stat .value { color: #6B9B4B; } |
| .optimizer-card.muon .highlight-stat .value { color: #7B8DB3; } |
| .optimizer-card.caspr .highlight-stat .value { color: #B47488; } |
| |
| .optimizer-card .highlight-stat .label { |
| font-size: 0.8rem; |
| color: #A0AEC0; |
| } |
| |
| |
| .impressionist-quote { |
| text-align: center; |
| padding: 4rem 2rem; |
| margin-top: 4rem; |
| position: relative; |
| } |
| |
| .impressionist-quote::before { |
| content: '~'; |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 3rem; |
| color: #C4B4A4; |
| display: block; |
| margin-bottom: 1rem; |
| } |
| |
| .impressionist-quote blockquote { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: clamp(1.25rem, 2.5vw, 1.75rem); |
| font-style: italic; |
| color: #5A6978; |
| line-height: 1.8; |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .impressionist-quote cite { |
| display: block; |
| font-family: 'Fraunces', Georgia, serif; |
| font-style: normal; |
| font-size: 0.9rem; |
| color: #A0AEC0; |
| margin-top: 1.5rem; |
| } |
| |
| |
| .family-tree { |
| background: rgba(255,255,255,0.7); |
| border-radius: 12px; |
| padding: 3rem; |
| margin-top: 4rem; |
| box-shadow: 0 8px 32px rgba(0,0,0,0.06); |
| } |
| |
| .family-tree h5 { |
| font-family: 'Fraunces', Georgia, serif; |
| font-size: 1.25rem; |
| font-style: italic; |
| color: #5A6978; |
| text-align: center; |
| margin-bottom: 2rem; |
| } |
| |
| .family-tree-svg { |
| width: 100%; |
| max-width: 800px; |
| margin: 0 auto; |
| display: block; |
| } |
| |
| @media (max-width: 1024px) { |
| .optimizer-garden { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .pissarro { |
| padding: 4rem 1.5rem; |
| } |
| |
| .optimizer-garden { |
| grid-template-columns: 1fr; |
| } |
| |
| .landscape-canvas { |
| padding: 1rem; |
| } |
| |
| .landscape-canvas::before { |
| font-size: 0.75rem; |
| } |
| |
| .family-tree { |
| padding: 1.5rem; |
| overflow-x: auto; |
| } |
| |
| .family-tree-svg { |
| min-width: 500px; |
| } |
| } |
| |
| |
| .focus { |
| padding: 10rem 4rem; |
| background: var(--color-bg); |
| } |
| |
| .focus-header { |
| text-align: center; |
| max-width: 700px; |
| margin: 0 auto 5rem; |
| } |
| |
| .focus-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1.5rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .focus-card { |
| background: white; |
| border: 1px solid var(--color-border); |
| border-radius: 20px; |
| padding: 2.5rem; |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .focus-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, var(--color-accent-warm), var(--color-accent)); |
| transform: scaleX(0); |
| transform-origin: left; |
| transition: transform 0.4s ease; |
| } |
| |
| .focus-card:hover { |
| border-color: var(--color-accent-light); |
| box-shadow: 0 20px 60px rgba(180, 83, 9, 0.08); |
| transform: translateY(-4px); |
| } |
| |
| .focus-card:hover::before { |
| transform: scaleX(1); |
| } |
| |
| .focus-card-number { |
| font-family: var(--font-serif); |
| font-size: 3rem; |
| font-weight: 300; |
| color: var(--color-border); |
| line-height: 1; |
| margin-bottom: 1.5rem; |
| transition: color 0.3s ease; |
| } |
| |
| .focus-card:hover .focus-card-number { |
| color: var(--color-accent-light); |
| } |
| |
| .focus-card h4 { |
| font-family: var(--font-serif); |
| font-size: 1.375rem; |
| font-weight: 500; |
| margin-bottom: 1rem; |
| } |
| |
| .focus-card p { |
| font-size: 0.9375rem; |
| color: var(--color-text-secondary); |
| line-height: 1.7; |
| } |
| |
| |
| .founder { |
| padding: 10rem 4rem; |
| background: var(--color-bg-dark); |
| color: white; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .founder::before { |
| content: ''; |
| position: absolute; |
| top: -50%; |
| right: -20%; |
| width: 800px; |
| height: 800px; |
| background: radial-gradient(circle, rgba(217, 119, 6, 0.15) 0%, transparent 60%); |
| pointer-events: none; |
| } |
| |
| .founder-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: 1fr 1.5fr; |
| gap: 6rem; |
| align-items: center; |
| position: relative; |
| } |
| |
| .founder-image-container { |
| position: relative; |
| } |
| |
| .founder-image { |
| width: 100%; |
| aspect-ratio: 4/5; |
| background: linear-gradient(135deg, #292524 0%, #1C1917 100%); |
| border-radius: 24px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .founder-image-placeholder { |
| position: absolute; |
| inset: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: var(--font-serif); |
| font-size: 6rem; |
| font-weight: 300; |
| color: rgba(255, 255, 255, 0.1); |
| background: |
| radial-gradient(circle at 30% 70%, rgba(217, 119, 6, 0.2) 0%, transparent 50%), |
| radial-gradient(circle at 70% 30%, rgba(180, 83, 9, 0.15) 0%, transparent 40%); |
| } |
| |
| .founder-image-border { |
| position: absolute; |
| top: -20px; |
| left: -20px; |
| right: 20px; |
| bottom: 20px; |
| border: 1px solid rgba(217, 119, 6, 0.3); |
| border-radius: 24px; |
| pointer-events: none; |
| } |
| |
| .founder-content { |
| padding: 2rem 0; |
| } |
| |
| .founder-label { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.15em; |
| color: var(--color-accent-warm); |
| margin-bottom: 1.5rem; |
| } |
| |
| .founder-name { |
| font-family: var(--font-serif); |
| font-size: clamp(2.5rem, 5vw, 3.5rem); |
| font-weight: 400; |
| line-height: 1.1; |
| margin-bottom: 0.75rem; |
| } |
| |
| .founder-role { |
| font-size: 1.125rem; |
| color: rgba(255, 255, 255, 0.5); |
| margin-bottom: 2rem; |
| } |
| |
| .founder-bio { |
| font-size: 1.0625rem; |
| color: rgba(255, 255, 255, 0.7); |
| line-height: 1.9; |
| margin-bottom: 2.5rem; |
| } |
| |
| .founder-links { |
| display: flex; |
| gap: 1.5rem; |
| } |
| |
| .founder-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: rgba(255, 255, 255, 0.6); |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
| |
| .founder-link:hover { |
| color: white; |
| } |
| |
| .founder-link svg { |
| width: 18px; |
| height: 18px; |
| } |
| |
| |
| .apply { |
| padding: 10rem 4rem; |
| background: var(--color-bg-cream); |
| } |
| |
| .apply-container { |
| max-width: 1000px; |
| margin: 0 auto; |
| text-align: center; |
| } |
| |
| .apply-title { |
| font-family: var(--font-serif); |
| font-size: clamp(2.5rem, 5vw, 4rem); |
| font-weight: 400; |
| line-height: 1.15; |
| letter-spacing: -0.02em; |
| margin-bottom: 1.5rem; |
| } |
| |
| .apply-description { |
| font-size: 1.125rem; |
| color: var(--color-text-secondary); |
| max-width: 600px; |
| margin: 0 auto 3rem; |
| line-height: 1.8; |
| } |
| |
| .apply-cta { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.75rem; |
| padding: 1.125rem 2.5rem; |
| font-size: 1rem; |
| font-weight: 500; |
| color: white; |
| background: linear-gradient(135deg, var(--color-accent-warm) 0%, var(--color-accent) 100%); |
| border: none; |
| border-radius: 100px; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 20px rgba(180, 83, 9, 0.25); |
| } |
| |
| .apply-cta:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 30px rgba(180, 83, 9, 0.35); |
| } |
| |
| .apply-cta svg { |
| width: 20px; |
| height: 20px; |
| transition: transform 0.2s ease; |
| } |
| |
| .apply-cta:hover svg { |
| transform: translateX(4px); |
| } |
| |
| .apply-note { |
| margin-top: 2rem; |
| font-size: 0.875rem; |
| color: var(--color-text-light); |
| } |
| |
| |
| .quote { |
| padding: 8rem 4rem; |
| background: var(--color-bg); |
| text-align: center; |
| } |
| |
| .quote-container { |
| max-width: 900px; |
| margin: 0 auto; |
| } |
| |
| .quote-mark { |
| font-family: var(--font-serif); |
| font-size: 6rem; |
| line-height: 1; |
| color: var(--color-accent-light); |
| margin-bottom: -2rem; |
| } |
| |
| .quote blockquote { |
| font-family: var(--font-serif); |
| font-size: clamp(1.5rem, 3vw, 2rem); |
| font-weight: 400; |
| font-style: italic; |
| line-height: 1.6; |
| color: var(--color-text); |
| margin-bottom: 2rem; |
| } |
| |
| .quote cite { |
| font-family: var(--font-sans); |
| font-style: normal; |
| font-size: 0.9375rem; |
| color: var(--color-text-secondary); |
| } |
| |
| |
| footer { |
| padding: 5rem 4rem 3rem; |
| background: var(--color-bg); |
| border-top: 1px solid var(--color-border); |
| } |
| |
| .footer-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .footer-main { |
| display: grid; |
| grid-template-columns: 2fr 1fr 1fr 1fr; |
| gap: 4rem; |
| padding-bottom: 4rem; |
| border-bottom: 1px solid var(--color-border); |
| } |
| |
| .footer-brand { |
| max-width: 300px; |
| } |
| |
| .footer-logo { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-family: var(--font-serif); |
| font-size: 1.15rem; |
| font-weight: 500; |
| color: var(--color-text); |
| text-decoration: none; |
| margin-bottom: 1.25rem; |
| } |
| |
| .footer-tagline { |
| font-size: 0.9375rem; |
| color: var(--color-text-secondary); |
| line-height: 1.7; |
| } |
| |
| .footer-column h5 { |
| font-size: 0.8rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--color-text); |
| margin-bottom: 1.25rem; |
| } |
| |
| .footer-column ul { |
| list-style: none; |
| } |
| |
| .footer-column li { |
| margin-bottom: 0.75rem; |
| } |
| |
| .footer-column a { |
| font-size: 0.9375rem; |
| color: var(--color-text-secondary); |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
| |
| .footer-column a:hover { |
| color: var(--color-text); |
| } |
| |
| .footer-bottom { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding-top: 2rem; |
| } |
| |
| .footer-copyright { |
| font-size: 0.875rem; |
| color: var(--color-text-light); |
| } |
| |
| .footer-legal { |
| display: flex; |
| gap: 2rem; |
| } |
| |
| .footer-legal a { |
| font-size: 0.875rem; |
| color: var(--color-text-light); |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
| |
| .footer-legal a:hover { |
| color: var(--color-text-secondary); |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(40px); |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .reveal.active { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| |
| @media (max-width: 1024px) { |
| nav { |
| padding: 1rem 2rem; |
| } |
| |
| .hero { |
| padding: 8rem 2rem 6rem; |
| } |
| |
| .mission-container { |
| grid-template-columns: 1fr; |
| gap: 4rem; |
| } |
| |
| .mission-card-stack { |
| height: auto; |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 1.5rem; |
| } |
| |
| .mission-card { |
| position: relative; |
| width: 100% !important; |
| top: auto !important; |
| left: auto !important; |
| } |
| |
| .algorithm { |
| padding: 6rem 2rem; |
| } |
| |
| .algorithm-visual { |
| padding: 1.5rem; |
| overflow-x: auto; |
| } |
| |
| .algorithm-svg { |
| min-width: 800px; |
| } |
| |
| .algorithm-comparison { |
| grid-template-columns: 1fr; |
| } |
| |
| .algorithm-steps { |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| } |
| |
| .algorithm-step::after { |
| display: none; |
| } |
| |
| .focus-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .founder-container { |
| grid-template-columns: 1fr; |
| gap: 4rem; |
| } |
| |
| .founder-image-container { |
| max-width: 400px; |
| margin: 0 auto; |
| } |
| |
| .footer-main { |
| grid-template-columns: 1fr 1fr; |
| gap: 3rem; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| nav { |
| padding: 1rem 1.5rem; |
| } |
| |
| .nav-links { |
| display: none; |
| } |
| |
| .hero { |
| padding: 7rem 1.5rem 4rem; |
| } |
| |
| .hero-stats { |
| flex-direction: column; |
| gap: 2rem; |
| } |
| |
| .mission, |
| .focus, |
| .founder, |
| .apply, |
| .quote, |
| .algorithm { |
| padding: 5rem 1.5rem; |
| } |
| |
| .mission-card-stack { |
| grid-template-columns: 1fr; |
| } |
| |
| .algorithm-steps { |
| grid-template-columns: 1fr; |
| } |
| |
| .equation-box { |
| padding: 1.5rem; |
| } |
| |
| .equation-box .equation { |
| font-size: 1.25rem; |
| } |
| |
| .focus-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .founder-image-border { |
| display: none; |
| } |
| |
| .footer-main { |
| grid-template-columns: 1fr; |
| gap: 2rem; |
| } |
| |
| .footer-bottom { |
| flex-direction: column; |
| gap: 1rem; |
| text-align: center; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <nav id="navbar"> |
| <a href="#" class="logo"> |
| <span class="logo-mark">SF</span> |
| The Shampoo Foundation |
| </a> |
| <ul class="nav-links"> |
| <li><a href="#mission">Mission</a></li> |
| <li><a href="#algorithm">Algorithm</a></li> |
| <li><a href="#focus">Focus Areas</a></li> |
| <li><a href="#founder">Founder</a></li> |
| <li><a href="#apply">Apply</a></li> |
| </ul> |
| <a href="#apply" class="nav-cta">Apply for Grant</a> |
| </nav> |
|
|
| <section class="hero"> |
| <div class="hero-bg"></div> |
| <div class="hero-grid"></div> |
| <div class="hero-content"> |
| <div class="hero-eyebrow"> |
| <span>A Non-Profit Foundation</span> |
| </div> |
| <h1>Funding the <em>future</em> of machine learning</h1> |
| <p class="hero-description">The Shampoo Foundation commits 95% of $1 billion to advance research in deep learning, optimization, and AI safety—empowering the next generation of breakthroughs that benefit humanity.</p> |
| <div class="hero-stats"> |
| <div class="hero-stat"> |
| <span class="hero-stat-value"><span class="currency">$</span>950M</span> |
| <span class="hero-stat-label">Committed to grants</span> |
| </div> |
| <div class="hero-stat"> |
| <span class="hero-stat-value">95%</span> |
| <span class="hero-stat-label">Distributed to research</span> |
| </div> |
| <div class="hero-stat"> |
| <span class="hero-stat-value">∞</span> |
| <span class="hero-stat-label">Potential impact</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="mission" id="mission"> |
| <div class="mission-container"> |
| <div class="mission-content reveal"> |
| <span class="section-label">Our Mission</span> |
| <h2 class="section-title">Accelerating progress through strategic philanthropy</h2> |
| <p class="section-text">The Shampoo Foundation was established with a singular vision: to remove barriers that prevent brilliant minds from pursuing transformative research in machine learning and optimization.</p> |
| <p class="section-text">We believe the most important advances emerge when researchers have the freedom to explore ambitious ideas without constraint. Our grants provide that freedom—funding fundamental research, open-source tools, and educational initiatives that shape the future of AI.</p> |
| </div> |
| <div class="mission-visual reveal"> |
| <div class="mission-card-stack"> |
| <div class="mission-card"> |
| <div class="mission-card-icon">🔬</div> |
| <h4>Fundamental Research</h4> |
| <p>Supporting long-term research that may not have immediate commercial applications but advances our understanding of intelligence.</p> |
| </div> |
| <div class="mission-card"> |
| <div class="mission-card-icon">🌍</div> |
| <h4>Open Science</h4> |
| <p>Championing open-source tools, datasets, and publications that democratize access to cutting-edge ML research.</p> |
| </div> |
| <div class="mission-card"> |
| <div class="mission-card-icon">🎓</div> |
| <h4>Education & Access</h4> |
| <p>Creating pathways for underrepresented communities to participate in and lead AI research.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="algorithm" id="algorithm"> |
| <div class="algorithm-container"> |
| <div class="algorithm-header reveal"> |
| <span class="section-label">The Algorithm</span> |
| <h2 class="section-title">Understanding Shampoo</h2> |
| <p class="section-text">A second-order optimizer that achieves the benefits of curvature-aware optimization while remaining computationally tractable at scale.</p> |
| </div> |
|
|
| |
| <div class="algorithm-visual reveal"> |
| <svg class="algorithm-svg" viewBox="0 0 1000 400" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| |
| <defs> |
| <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"> |
| <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#F5F5F4" stroke-width="0.5"/> |
| </pattern> |
| <linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#D97706"/> |
| <stop offset="100%" style="stop-color:#B45309"/> |
| </linearGradient> |
| <linearGradient id="matrixGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" style="stop-color:#FEF3C7"/> |
| <stop offset="100%" style="stop-color:#FDE68A"/> |
| </linearGradient> |
| <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> |
| <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.08"/> |
| </filter> |
| </defs> |
| <rect width="1000" height="400" fill="url(#grid)"/> |
|
|
| |
| <text x="500" y="35" text-anchor="middle" fill="#1C1917" font-family="Inter, sans-serif" font-size="13" font-weight="600" letter-spacing="0.1em">KRONECKER-FACTORED PRECONDITIONING</text> |
|
|
| |
| <g transform="translate(80, 80)"> |
| <text x="60" y="0" text-anchor="middle" fill="#78716C" font-family="Inter, sans-serif" font-size="11" font-weight="500">FULL HESSIAN</text> |
| <text x="60" y="16" text-anchor="middle" fill="#A8A29E" font-family="Inter, sans-serif" font-size="10">(Impractical)</text> |
|
|
| |
| <rect x="0" y="30" width="120" height="120" rx="8" fill="#F7F3ED" stroke="#E7E5E4" stroke-width="1.5"/> |
|
|
| |
| <g opacity="0.4"> |
| <line x1="30" y1="30" x2="30" y2="150" stroke="#D6D3D1" stroke-width="0.5"/> |
| <line x1="60" y1="30" x2="60" y2="150" stroke="#D6D3D1" stroke-width="0.5"/> |
| <line x1="90" y1="30" x2="90" y2="150" stroke="#D6D3D1" stroke-width="0.5"/> |
| <line x1="0" y1="60" x2="120" y2="60" stroke="#D6D3D1" stroke-width="0.5"/> |
| <line x1="0" y1="90" x2="120" y2="90" stroke="#D6D3D1" stroke-width="0.5"/> |
| <line x1="0" y1="120" x2="120" y2="120" stroke="#D6D3D1" stroke-width="0.5"/> |
| </g> |
|
|
| |
| <text x="60" y="170" text-anchor="middle" fill="#78716C" font-family="Inter, sans-serif" font-size="11">(mn × mn)</text> |
| <text x="60" y="186" text-anchor="middle" fill="#B45309" font-family="Inter, sans-serif" font-size="10" font-weight="600">O(n⁴) memory</text> |
|
|
| |
| <g transform="translate(45, 75)"> |
| <circle cx="15" cy="15" r="18" fill="#FEE2E2" stroke="#EF4444" stroke-width="1.5"/> |
| <path d="M9 9 L21 21 M21 9 L9 21" stroke="#EF4444" stroke-width="2.5" stroke-linecap="round"/> |
| </g> |
| </g> |
|
|
| |
| <g transform="translate(230, 165)"> |
| <path d="M0 0 L60 0" stroke="#E7E5E4" stroke-width="2" stroke-dasharray="4 4"/> |
| <polygon points="65,0 55,-6 55,6" fill="#E7E5E4"/> |
| </g> |
|
|
| |
| <g transform="translate(320, 60)"> |
| <text x="170" y="0" text-anchor="middle" fill="#B45309" font-family="Inter, sans-serif" font-size="11" font-weight="600">SHAMPOO'S INSIGHT</text> |
| <text x="170" y="16" text-anchor="middle" fill="#78716C" font-family="Inter, sans-serif" font-size="10">Kronecker Factorization</text> |
|
|
| |
| <g filter="url(#shadow)"> |
| <rect x="0" y="50" width="80" height="80" rx="8" fill="url(#matrixGrad)" stroke="#D97706" stroke-width="1.5"/> |
| <text x="40" y="98" text-anchor="middle" fill="#B45309" font-family="Georgia, serif" font-size="24" font-weight="400">L</text> |
| </g> |
| <text x="40" y="150" text-anchor="middle" fill="#78716C" font-family="Inter, sans-serif" font-size="10">(m × m)</text> |
|
|
| |
| <g transform="translate(100, 75)"> |
| <circle cx="20" cy="15" r="16" fill="white" stroke="#E7E5E4" stroke-width="1.5"/> |
| <text x="20" y="21" text-anchor="middle" fill="#1C1917" font-family="Georgia, serif" font-size="18">⊗</text> |
| </g> |
|
|
| |
| <g filter="url(#shadow)"> |
| <rect x="160" y="50" width="80" height="80" rx="8" fill="url(#matrixGrad)" stroke="#D97706" stroke-width="1.5"/> |
| <text x="200" y="98" text-anchor="middle" fill="#B45309" font-family="Georgia, serif" font-size="24" font-weight="400">R</text> |
| </g> |
| <text x="200" y="150" text-anchor="middle" fill="#78716C" font-family="Inter, sans-serif" font-size="10">(n × n)</text> |
|
|
| |
| <g transform="translate(260, 75)"> |
| <text x="20" y="20" text-anchor="middle" fill="#1C1917" font-family="Georgia, serif" font-size="20">=</text> |
| </g> |
|
|
| |
| <g transform="translate(300, 50)"> |
| <rect x="0" y="0" width="140" height="80" rx="12" fill="#ECFDF5" stroke="#10B981" stroke-width="1.5"/> |
| <text x="70" y="30" text-anchor="middle" fill="#047857" font-family="Inter, sans-serif" font-size="11" font-weight="600">O(m² + n²)</text> |
| <text x="70" y="48" text-anchor="middle" fill="#047857" font-family="Inter, sans-serif" font-size="10">memory</text> |
| <text x="70" y="68" text-anchor="middle" fill="#10B981" font-family="Inter, sans-serif" font-size="10">✓ Tractable!</text> |
| </g> |
| </g> |
|
|
| |
| <g transform="translate(80, 260)"> |
| <text x="420" y="0" text-anchor="middle" fill="#1C1917" font-family="Inter, sans-serif" font-size="12" font-weight="600">THE PRECONDITIONED UPDATE</text> |
|
|
| |
| <g transform="translate(0, 25)"> |
| <rect x="0" y="0" width="100" height="70" rx="10" fill="white" stroke="#E7E5E4" stroke-width="1.5" filter="url(#shadow)"/> |
| <text x="50" y="35" text-anchor="middle" fill="#1C1917" font-family="Georgia, serif" font-size="22" font-style="italic">G</text> |
| <text x="50" y="55" text-anchor="middle" fill="#78716C" font-family="Inter, sans-serif" font-size="9">Gradient</text> |
| </g> |
|
|
| |
| <g transform="translate(115, 50)"> |
| <path d="M0 10 L35 10" stroke="url(#accentGrad)" stroke-width="2"/> |
| <polygon points="40,10 32,5 32,15" fill="url(#accentGrad)"/> |
| </g> |
|
|
| |
| <g transform="translate(170, 25)"> |
| <rect x="0" y="0" width="110" height="70" rx="10" fill="url(#matrixGrad)" stroke="#D97706" stroke-width="1.5" filter="url(#shadow)"/> |
| <text x="55" y="32" text-anchor="middle" fill="#B45309" font-family="Georgia, serif" font-size="18">L</text> |
| <text x="70" y="26" text-anchor="middle" fill="#B45309" font-family="Georgia, serif" font-size="12">−¼</text> |
| <text x="55" y="55" text-anchor="middle" fill="#92400E" font-family="Inter, sans-serif" font-size="9">Left Precond.</text> |
| </g> |
|
|
| |
| <g transform="translate(290, 50)"> |
| <text x="10" y="14" fill="#78716C" font-family="Georgia, serif" font-size="16">×</text> |
| </g> |
|
|
| |
| <g transform="translate(320, 25)"> |
| <rect x="0" y="0" width="80" height="70" rx="10" fill="#F0FDF4" stroke="#86EFAC" stroke-width="1.5" filter="url(#shadow)"/> |
| <text x="40" y="35" text-anchor="middle" fill="#166534" font-family="Georgia, serif" font-size="22" font-style="italic">G</text> |
| <text x="40" y="55" text-anchor="middle" fill="#166534" font-family="Inter, sans-serif" font-size="9">Transforming</text> |
| </g> |
|
|
| |
| <g transform="translate(410, 50)"> |
| <text x="10" y="14" fill="#78716C" font-family="Georgia, serif" font-size="16">×</text> |
| </g> |
|
|
| |
| <g transform="translate(440, 25)"> |
| <rect x="0" y="0" width="110" height="70" rx="10" fill="url(#matrixGrad)" stroke="#D97706" stroke-width="1.5" filter="url(#shadow)"/> |
| <text x="50" y="32" text-anchor="middle" fill="#B45309" font-family="Georgia, serif" font-size="18">R</text> |
| <text x="65" y="26" text-anchor="middle" fill="#B45309" font-family="Georgia, serif" font-size="12">−¼</text> |
| <text x="55" y="55" text-anchor="middle" fill="#92400E" font-family="Inter, sans-serif" font-size="9">Right Precond.</text> |
| </g> |
|
|
| |
| <g transform="translate(565, 50)"> |
| <path d="M0 10 L35 10" stroke="url(#accentGrad)" stroke-width="2"/> |
| <polygon points="40,10 32,5 32,15" fill="url(#accentGrad)"/> |
| </g> |
|
|
| |
| <g transform="translate(620, 25)"> |
| <rect x="0" y="0" width="120" height="70" rx="10" fill="linear-gradient(135deg, #D97706 0%, #B45309 100%)" filter="url(#shadow)"/> |
| <rect x="0" y="0" width="120" height="70" rx="10" fill="url(#accentGrad)"/> |
| <text x="60" y="32" text-anchor="middle" fill="white" font-family="Georgia, serif" font-size="20" font-style="italic">H</text> |
| <text x="60" y="55" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-family="Inter, sans-serif" font-size="9">Preconditioned!</text> |
| </g> |
| </g> |
| </svg> |
| </div> |
|
|
| |
| <div class="algorithm-comparison"> |
| <div class="comparison-card reveal"> |
| <h4><span class="icon">📉</span> First-Order Methods</h4> |
| <p>Traditional optimizers like SGD and Adam only use gradient information. They treat all parameter directions equally, leading to slow convergence on ill-conditioned problems where the loss surface has very different curvatures in different directions.</p> |
| <div class="metric"> |
| <span class="metric-value">2,512</span> |
| <span class="metric-label">steps to 75.9% on ResNet-50</span> |
| </div> |
| </div> |
| <div class="comparison-card highlight reveal"> |
| <h4><span class="icon">🚀</span> Second-Order: Shampoo</h4> |
| <p>Shampoo uses curvature information via efficient Kronecker-factored preconditioners. By accumulating gradient statistics in L and R matrices, it adapts to the geometry of the loss landscape—taking larger steps in flat directions and smaller steps in steep ones.</p> |
| <div class="metric"> |
| <span class="metric-value">1,729</span> |
| <span class="metric-label">steps to 75.9% on ResNet-50</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="algorithm-steps"> |
| <div class="algorithm-step reveal"> |
| <div class="step-icon">∇</div> |
| <h5>Compute Gradient</h5> |
| <p>Calculate gradient G for the current mini-batch</p> |
| </div> |
| <div class="algorithm-step reveal"> |
| <div class="step-icon">Σ</div> |
| <h5>Accumulate Statistics</h5> |
| <p>Update L ← L + GGᵀ and R ← R + GᵀG</p> |
| </div> |
| <div class="algorithm-step reveal"> |
| <div class="step-icon">√</div> |
| <h5>Compute Roots</h5> |
| <p>Efficiently compute L⁻¹ᐟ⁴ and R⁻¹ᐟ⁴ via Schur-Newton</p> |
| </div> |
| <div class="algorithm-step reveal"> |
| <div class="step-icon">⟹</div> |
| <h5>Apply Update</h5> |
| <p>W ← W − η · L⁻¹ᐟ⁴ G R⁻¹ᐟ⁴</p> |
| </div> |
| </div> |
|
|
| |
| <div class="equation-box reveal"> |
| <div class="equation">H<sub>t</sub> = L<sub>t</sub><sup>−¼</sup> G<sub>t</sub> R<sub>t</sub><sup>−¼</sup></div> |
| <div class="equation-label">The Shampoo preconditioned gradient update — elegant, efficient, powerful</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="banksy" id="banksy"> |
| <div class="banksy-wall"></div> |
| <div class="banksy-bricks"></div> |
|
|
| |
| <div class="splatter splatter-1"></div> |
| <div class="splatter splatter-2"></div> |
| <div class="splatter splatter-3"></div> |
|
|
| |
| <svg class="banksy-rat" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <g fill="white"> |
| |
| <ellipse cx="100" cy="120" rx="60" ry="35" fill="white"/> |
| <ellipse cx="55" cy="105" rx="25" ry="20" fill="white"/> |
| <circle cx="45" cy="98" r="4" fill="#1a1a1a"/> |
| <ellipse cx="38" cy="95" rx="8" ry="12" fill="white"/> |
| <ellipse cx="52" cy="88" rx="10" ry="15" fill="white"/> |
| |
| <path d="M160 120 Q180 100 175 70 Q172 50 185 40" stroke="white" stroke-width="6" fill="none" stroke-linecap="round"/> |
| |
| <rect x="70" y="145" width="8" height="20" rx="2" fill="white"/> |
| <rect x="95" y="148" width="8" height="22" rx="2" fill="white"/> |
| <rect x="120" y="146" width="8" height="20" rx="2" fill="white"/> |
| |
| <rect x="20" y="115" width="25" height="40" rx="4" fill="white"/> |
| <rect x="28" y="105" width="10" height="12" rx="2" fill="white"/> |
| <circle cx="32" cy="102" r="4" fill="white"/> |
| |
| <ellipse cx="32" cy="85" rx="8" ry="5" fill="#ff0000" opacity="0.8"/> |
| <ellipse cx="30" cy="70" rx="12" ry="8" fill="#ff0000" opacity="0.5"/> |
| <ellipse cx="35" cy="55" rx="15" ry="10" fill="#ff0000" opacity="0.3"/> |
| </g> |
| </svg> |
|
|
| <div class="banksy-content"> |
| <div class="banksy-header"> |
| <h2 class="banksy-title">Destroy<br/>The Gradient</h2> |
| <p class="banksy-subtitle">A street guide to second-order optimization</p> |
| </div> |
|
|
| <div class="stencil-container"> |
| <div class="stencil-card"> |
| <div class="spray-text red drip">The Problem</div> |
| <p class="stencil-body"> |
| For 50 years, <strong>SGD</strong> has ruled machine learning like a corrupt regime. It only looks at the slope. It ignores the terrain. It takes the same tiny steps whether crossing a flat plain or climbing a cliff.<br><br> |
| <strong>Adam</strong> tried to fix it. Added momentum. Added adaptive rates. But it's still first-order. Still blind to curvature. Still part of the system. |
| </p> |
| </div> |
| <div class="stencil-card"> |
| <div class="spray-text yellow drip">The Revolution</div> |
| <p class="stencil-body"> |
| <strong>Shampoo</strong> sees what others don't. It reads the curvature of the loss landscape. It knows when to sprint and when to tiptoe.<br><br> |
| The secret? <strong>Kronecker factorization</strong>. Instead of storing an impossible (n² × n²) matrix, it keeps two smaller ones. The establishment said it couldn't be done. They were wrong. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="graffiti-equation"> |
| <div class="eq"> |
| W<sub>t+1</sub> = W<sub>t</sub> − η · <span class="highlight">L<sup>−¼</sup></span> G <span class="highlight">R<sup>−¼</sup></span> |
| </div> |
| </div> |
|
|
| <div class="versus"> |
| <div class="versus-side old"> |
| <h4>First Order</h4> |
| <p>2,512</p> |
| <span style="color:#666;font-family:monospace;font-size:0.8rem;">steps to converge</span> |
| </div> |
| <div class="versus-divider">VS</div> |
| <div class="versus-side new"> |
| <h4>Shampoo</h4> |
| <p>1,729</p> |
| <span style="color:#666;font-family:monospace;font-size:0.8rem;">steps to converge</span> |
| </div> |
| </div> |
|
|
| <ul class="manifesto"> |
| <li>Storing the full Hessian<span>O(n⁴) memory — impossible for real networks</span></li> |
| <li>Diagonal approximations<span>Throws away all the useful structure</span></li> |
| <li>Ignoring curvature entirely<span>Walking blindfolded through a maze</span></li> |
| <li class="yes">Kronecker-factored preconditioners<span>O(m² + n²) memory — actually tractable</span></li> |
| <li class="yes">Accumulate L = GGᵀ and R = GᵀG<span>Capture structure without explosion</span></li> |
| <li class="yes">Matrix fourth roots via Schur-Newton<span>Fast, stable, no eigendecomposition needed</span></li> |
| </ul> |
|
|
| |
| <svg class="stencil-svg" viewBox="0 0 600 200" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| |
| <g transform="translate(50, 30)"> |
| <text x="50" y="0" text-anchor="middle" fill="#666" font-family="Courier New" font-size="10" letter-spacing="0.1em">RAW GRADIENT</text> |
| <rect x="0" y="20" width="100" height="120" fill="none" stroke="#ff0000" stroke-width="2"/> |
| |
| <path d="M20 50 L80 90" stroke="white" stroke-width="2"/> |
| <path d="M30 100 L70 40" stroke="white" stroke-width="2"/> |
| <path d="M50 30 L50 130" stroke="white" stroke-width="2"/> |
| <path d="M15 70 L85 70" stroke="white" stroke-width="2"/> |
| <path d="M25 120 L75 50" stroke="white" stroke-width="2"/> |
| <path d="M40 35 L60 125" stroke="white" stroke-width="2"/> |
| <text x="50" y="160" text-anchor="middle" fill="#ff0000" font-family="Arial Black" font-size="12">CHAOS</text> |
| </g> |
|
|
| |
| <g transform="translate(180, 80)"> |
| <rect x="0" y="0" width="240" height="50" fill="rgba(255,255,255,0.05)" rx="4"/> |
| <text x="120" y="20" text-anchor="middle" fill="#888" font-family="Courier New" font-size="9">PRECONDITION</text> |
| <text x="120" y="38" text-anchor="middle" fill="white" font-family="Times New Roman" font-size="14">L<tspan baseline-shift="super" font-size="9">−¼</tspan> × G × R<tspan baseline-shift="super" font-size="9">−¼</tspan></text> |
| <path d="M0 25 L-15 25 M240 25 L255 25" stroke="#ff0000" stroke-width="2"/> |
| <polygon points="255,25 248,20 248,30" fill="#ff0000"/> |
| </g> |
|
|
| |
| <g transform="translate(450, 30)"> |
| <text x="50" y="0" text-anchor="middle" fill="#666" font-family="Courier New" font-size="10" letter-spacing="0.1em">PRECONDITIONED</text> |
| <rect x="0" y="20" width="100" height="120" fill="none" stroke="#00ff00" stroke-width="2"/> |
| |
| <path d="M20 40 L20 120" stroke="white" stroke-width="2"/> |
| <polygon points="20,120 15,110 25,110" fill="white"/> |
| <path d="M40 45 L40 115" stroke="white" stroke-width="2"/> |
| <polygon points="40,115 35,105 45,105" fill="white"/> |
| <path d="M60 40 L60 120" stroke="white" stroke-width="2"/> |
| <polygon points="60,120 55,110 65,110" fill="white"/> |
| <path d="M80 45 L80 115" stroke="white" stroke-width="2"/> |
| <polygon points="80,115 75,105 85,105" fill="white"/> |
| <text x="50" y="160" text-anchor="middle" fill="#00ff00" font-family="Arial Black" font-size="12">ORDER</text> |
| </g> |
| </svg> |
|
|
| <div class="banksy-quote"> |
| "They told us second-order was too expensive. We told them they weren't trying hard enough." |
| <span class="author">— The Shampoo Manifesto</span> |
| </div> |
|
|
| <div class="banksy-footer"> |
| <p>Exit through the gradient shop</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="arcade" id="arcade"> |
| <div class="arcade-crt"></div> |
| <div class="arcade-grid"></div> |
|
|
| <div class="arcade-content"> |
| <div class="arcade-header"> |
| <h2 class="arcade-title">Optimizer<br/>Kombat</h2> |
| <p class="arcade-subtitle">Second Order Showdown</p> |
| <p class="insert-coin">>>> INSERT COIN TO CONTINUE <<<</p> |
| </div> |
|
|
| |
| <div class="fighter-select"> |
| <div class="fighter-card"> |
| <div class="fighter-avatar">📉</div> |
| <h4>SGD</h4> |
| <div class="class">First Order • Basic</div> |
| </div> |
| <div class="fighter-card legendary selected"> |
| <div class="fighter-avatar">🧴</div> |
| <h4>Shampoo</h4> |
| <div class="class">Second Order • OG</div> |
| </div> |
| <div class="fighter-card"> |
| <div class="fighter-avatar">🫧</div> |
| <h4>SOAP</h4> |
| <div class="class">Second Order • Hybrid</div> |
| </div> |
| <div class="fighter-card"> |
| <div class="fighter-avatar">μ</div> |
| <h4>Muon</h4> |
| <div class="class">Orthogonal • Speed</div> |
| </div> |
| <div class="fighter-card"> |
| <div class="fighter-avatar">∑</div> |
| <h4>CASPR</h4> |
| <div class="class">Kron-Sum • Theory</div> |
| </div> |
| </div> |
|
|
| |
| <div class="battle-arena"> |
| |
| <div class="health-bars"> |
| <div class="health-bar-container"> |
| <div class="health-bar-name">Shampoo</div> |
| <div class="health-bar"> |
| <div class="health-bar-fill"></div> |
| </div> |
| </div> |
| <div class="health-bar-container right"> |
| <div class="health-bar-name">Adam</div> |
| <div class="health-bar"> |
| <div class="health-bar-fill"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="battle-grid"> |
| |
| <div class="battle-fighter winner"> |
| <div class="fighter-portrait">🧴</div> |
| <div class="fighter-name">Shampoo</div> |
| <div class="fighter-title">The Preconditioner</div> |
|
|
| <div class="stat-bars"> |
| <div class="stat-row"> |
| <span class="stat-label">SPEED</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 85%"></div></div> |
| <span class="stat-value">85</span> |
| </div> |
| <div class="stat-row"> |
| <span class="stat-label">POWER</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 92%"></div></div> |
| <span class="stat-value">92</span> |
| </div> |
| <div class="stat-row"> |
| <span class="stat-label">MEMORY</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 60%"></div></div> |
| <span class="stat-value">60</span> |
| </div> |
| <div class="stat-row"> |
| <span class="stat-label">THEORY</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 95%"></div></div> |
| <span class="stat-value">95</span> |
| </div> |
| </div> |
|
|
| <div class="special-moves"> |
| <h5>Special Moves</h5> |
| <div class="move"> |
| <div class="move-keys"> |
| <span class="key">↓</span> |
| <span class="key">→</span> |
| <span class="key">L</span> |
| </div> |
| <span class="move-name">Kronecker Factor</span> |
| </div> |
| <div class="move"> |
| <div class="move-keys"> |
| <span class="key">←</span> |
| <span class="key">→</span> |
| <span class="key">R</span> |
| </div> |
| <span class="move-name">Fourth Root Fury</span> |
| </div> |
| <div class="move"> |
| <div class="move-keys"> |
| <span class="key">↓</span> |
| <span class="key">↓</span> |
| <span class="key">G</span> |
| </div> |
| <span class="move-name">Preconditioned HADOUKEN</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="battle-vs"> |
| <div class="battle-vs-text">VS</div> |
| </div> |
|
|
| |
| <div class="battle-fighter"> |
| <div class="fighter-portrait">📊</div> |
| <div class="fighter-name">Adam</div> |
| <div class="fighter-title">The Adaptive One</div> |
|
|
| <div class="stat-bars"> |
| <div class="stat-row"> |
| <span class="stat-label">SPEED</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 70%"></div></div> |
| <span class="stat-value">70</span> |
| </div> |
| <div class="stat-row"> |
| <span class="stat-label">POWER</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 65%"></div></div> |
| <span class="stat-value">65</span> |
| </div> |
| <div class="stat-row"> |
| <span class="stat-label">MEMORY</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 85%"></div></div> |
| <span class="stat-value">85</span> |
| </div> |
| <div class="stat-row"> |
| <span class="stat-label">THEORY</span> |
| <div class="stat-bar"><div class="stat-bar-fill" style="width: 50%"></div></div> |
| <span class="stat-value">50</span> |
| </div> |
| </div> |
|
|
| <div class="special-moves"> |
| <h5>Special Moves</h5> |
| <div class="move"> |
| <div class="move-keys"> |
| <span class="key">→</span> |
| <span class="key">→</span> |
| <span class="key">M</span> |
| </div> |
| <span class="move-name">Momentum Rush</span> |
| </div> |
| <div class="move"> |
| <div class="move-keys"> |
| <span class="key">↓</span> |
| <span class="key">↑</span> |
| <span class="key">V</span> |
| </div> |
| <span class="move-name">Variance Vortex</span> |
| </div> |
| <div class="move"> |
| <div class="move-keys"> |
| <span class="key">←</span> |
| <span class="key">↓</span> |
| <span class="key">β</span> |
| </div> |
| <span class="move-name">Beta Correction</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="combo-display"> |
| <div class="combo-number">47</div> |
| <div class="combo-text">Hit Combo!</div> |
| </div> |
| </div> |
|
|
| |
| <div class="winner-announcement"> |
| <h3>Shampoo Wins!</h3> |
| <p>FLAWLESS VICTORY — 40% faster convergence, 2× fewer iterations. The preconditioner has spoken.</p> |
| </div> |
|
|
| |
| <div class="high-scores"> |
| <h4>>>> Global Leaderboard <<<</h4> |
| <table class="score-table"> |
| <thead> |
| <tr> |
| <th>Rank</th> |
| <th>Optimizer</th> |
| <th>Steps to 75.9%</th> |
| <th>Special Ability</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="rank">1ST</td> |
| <td class="optimizer-name"><span>μ</span> MUON</td> |
| <td class="score">~1,200</td> |
| <td class="special">2× COMPUTE EFFICIENCY</td> |
| </tr> |
| <tr> |
| <td class="rank">2ND</td> |
| <td class="optimizer-name"><span>🫧</span> SOAP</td> |
| <td class="score">~1,500</td> |
| <td class="special">ADAM IN EIGENBASIS</td> |
| </tr> |
| <tr> |
| <td class="rank">3RD</td> |
| <td class="optimizer-name"><span>🧴</span> SHAMPOO</td> |
| <td class="score">1,729</td> |
| <td class="special">KRONECKER FACTORIZATION</td> |
| </tr> |
| <tr> |
| <td class="rank">4TH</td> |
| <td class="optimizer-name"><span>∑</span> CASPR</td> |
| <td class="score">~1,800</td> |
| <td class="special">TIGHTER BOUNDS</td> |
| </tr> |
| <tr> |
| <td class="rank">5TH</td> |
| <td class="optimizer-name"><span>📊</span> ADAMW</td> |
| <td class="score">2,512</td> |
| <td class="special">WEIGHT DECAY</td> |
| </tr> |
| <tr> |
| <td class="rank">6TH</td> |
| <td class="optimizer-name"><span>📉</span> SGD</td> |
| <td class="score">4,000+</td> |
| <td class="special">SIMPLICITY</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
|
|
| <div class="arcade-credits"> |
| <p>© 2018-2025 OPTIMIZATION LABS</p> |
| <p class="blink">GAME OVER — CONTINUE?</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="pissarro" id="pissarro"> |
| <div class="pissarro-sky"></div> |
| <div class="pissarro-dots"></div> |
|
|
| <div class="pissarro-content"> |
| <div class="pissarro-header"> |
| <h2 class="pissarro-title">A Garden of Optimizers</h2> |
| <p class="pissarro-subtitle">Four paths through the landscape of loss, each with its own light and color, converging toward the same distant horizon.</p> |
| </div> |
|
|
| |
| <div class="landscape-canvas"> |
| <svg class="landscape-svg" viewBox="0 0 1000 450" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| |
| <defs> |
| <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%"> |
| <stop offset="0%" style="stop-color:#B8C4D4"/> |
| <stop offset="50%" style="stop-color:#C9D5E0"/> |
| <stop offset="100%" style="stop-color:#DED8CE"/> |
| </linearGradient> |
| <linearGradient id="fieldGrad" x1="0%" y1="0%" x2="0%" y2="100%"> |
| <stop offset="0%" style="stop-color:#C4B896"/> |
| <stop offset="50%" style="stop-color:#A8C090"/> |
| <stop offset="100%" style="stop-color:#7BA05B"/> |
| </linearGradient> |
| <linearGradient id="lossGrad" x1="0%" y1="100%" x2="0%" y2="0%"> |
| <stop offset="0%" style="stop-color:#6B8B5A"/> |
| <stop offset="30%" style="stop-color:#9BAB7A"/> |
| <stop offset="60%" style="stop-color:#C4B896"/> |
| <stop offset="100%" style="stop-color:#DED8CE"/> |
| </linearGradient> |
| <filter id="impressionist" x="-5%" y="-5%" width="110%" height="110%"> |
| <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/> |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G"/> |
| </filter> |
| <filter id="softGlow"> |
| <feGaussianBlur stdDeviation="2" result="blur"/> |
| <feMerge> |
| <feMergeNode in="blur"/> |
| <feMergeNode in="SourceGraphic"/> |
| </feMerge> |
| </filter> |
| </defs> |
|
|
| |
| <rect x="0" y="0" width="1000" height="200" fill="url(#skyGrad)"/> |
|
|
| |
| <ellipse cx="200" cy="200" rx="250" ry="60" fill="#A8B8A0" opacity="0.6"/> |
| <ellipse cx="700" cy="190" rx="300" ry="70" fill="#98A890" opacity="0.5"/> |
| <ellipse cx="500" cy="195" rx="200" ry="50" fill="#B8C4A8" opacity="0.4"/> |
|
|
| |
| <path d="M0 200 Q100 280 200 240 Q350 180 500 220 Q650 260 750 200 Q850 140 950 180 L1000 180 L1000 450 L0 450 Z" fill="url(#lossGrad)" filter="url(#impressionist)"/> |
|
|
| |
| <circle cx="850" cy="160" r="25" fill="#FFD700" opacity="0.3" filter="url(#softGlow)"/> |
| <circle cx="850" cy="160" r="12" fill="#FFD700" opacity="0.5"/> |
| <circle cx="850" cy="160" r="5" fill="#FFF8DC"/> |
| <text x="850" y="135" text-anchor="middle" fill="#8B7355" font-family="Fraunces, Georgia" font-size="11" font-style="italic">minimum</text> |
|
|
| |
| <path d="M80 350 Q100 340 110 355 Q130 370 150 350 Q180 320 200 340 Q230 360 260 330 Q300 290 340 310 Q380 330 420 300 Q470 260 520 280 Q570 300 620 260 Q680 210 740 230 Q800 250 830 200 Q840 180 850 165" |
| stroke="#9CA3AF" stroke-width="2" fill="none" stroke-dasharray="4 4" opacity="0.5"/> |
| <circle cx="80" cy="350" r="6" fill="#9CA3AF"/> |
| <text x="80" y="375" text-anchor="middle" fill="#9CA3AF" font-family="Inter" font-size="9" font-weight="500">SGD</text> |
|
|
| |
| <path d="M120 380 Q180 350 250 320 Q350 280 450 260 Q550 240 650 210 Q750 180 850 165" |
| stroke="#D4A574" stroke-width="3.5" fill="none" stroke-linecap="round" filter="url(#softGlow)"/> |
| <circle cx="120" cy="380" r="8" fill="#D4A574"/> |
| <circle cx="450" cy="260" r="4" fill="#D4A574" opacity="0.6"/> |
| <circle cx="650" cy="210" r="4" fill="#D4A574" opacity="0.6"/> |
| <text x="120" y="405" text-anchor="middle" fill="#C49A6C" font-family="Fraunces, Georgia" font-size="11" font-weight="500">Shampoo</text> |
|
|
| |
| <path d="M160 360 Q240 320 340 290 Q460 250 580 220 Q700 190 850 165" |
| stroke="#7BA05B" stroke-width="3.5" fill="none" stroke-linecap="round" filter="url(#softGlow)"/> |
| <circle cx="160" cy="360" r="8" fill="#7BA05B"/> |
| <circle cx="460" cy="250" r="4" fill="#7BA05B" opacity="0.6"/> |
| <text x="160" y="385" text-anchor="middle" fill="#6B9B4B" font-family="Fraunces, Georgia" font-size="11" font-weight="500">SOAP</text> |
|
|
| |
| <path d="M200 340 Q300 300 420 270 Q560 235 700 200 Q790 175 850 165" |
| stroke="#8B9DC3" stroke-width="3.5" fill="none" stroke-linecap="round" filter="url(#softGlow)"/> |
| <circle cx="200" cy="340" r="8" fill="#8B9DC3"/> |
| <circle cx="560" cy="235" r="4" fill="#8B9DC3" opacity="0.6"/> |
| <text x="200" y="365" text-anchor="middle" fill="#7B8DB3" font-family="Fraunces, Georgia" font-size="11" font-weight="500">Muon</text> |
|
|
| |
| <path d="M140 400 Q220 360 320 320 Q440 275 560 245 Q700 210 850 165" |
| stroke="#C4849B" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="8 4" filter="url(#softGlow)"/> |
| <circle cx="140" cy="400" r="8" fill="#C4849B"/> |
| <text x="140" y="425" text-anchor="middle" fill="#B47488" font-family="Fraunces, Georgia" font-size="11" font-weight="500">CASPR</text> |
|
|
| |
| <g opacity="0.3"> |
| <circle cx="300" cy="300" r="3" fill="#8B9D7A"/> |
| <circle cx="450" cy="280" r="2" fill="#A67C52"/> |
| <circle cx="600" cy="240" r="3" fill="#7A8B6A"/> |
| <circle cx="750" cy="200" r="2" fill="#9B8B7A"/> |
| <circle cx="380" cy="320" r="2" fill="#6B8B5A"/> |
| <circle cx="520" cy="260" r="3" fill="#AB9B8A"/> |
| <circle cx="680" cy="220" r="2" fill="#8B8B7A"/> |
| <circle cx="820" cy="180" r="3" fill="#C4A574"/> |
| </g> |
|
|
| |
| <g transform="translate(50, 220)"> |
| <ellipse cx="20" cy="0" rx="25" ry="35" fill="#5B7B4A" opacity="0.8"/> |
| <ellipse cx="15" cy="-10" rx="20" ry="28" fill="#6B8B5A" opacity="0.7"/> |
| <rect x="15" y="25" width="8" height="30" fill="#8B7355"/> |
| </g> |
| <g transform="translate(920, 180)"> |
| <ellipse cx="20" cy="0" rx="22" ry="30" fill="#5B7B4A" opacity="0.7"/> |
| <ellipse cx="18" cy="-8" rx="18" ry="24" fill="#6B8B5A" opacity="0.6"/> |
| <rect x="16" y="22" width="6" height="25" fill="#8B7355"/> |
| </g> |
|
|
| |
| <rect x="20" y="20" width="180" height="120" rx="8" fill="rgba(255,255,255,0.85)" stroke="#D4C4B0"/> |
| <text x="110" y="42" text-anchor="middle" fill="#5A6978" font-family="Fraunces, Georgia" font-size="11" font-style="italic">Chemins vers le minimum</text> |
| <line x1="35" y1="58" x2="65" y2="58" stroke="#D4A574" stroke-width="3"/> |
| <text x="75" y="62" fill="#5A6978" font-family="Inter" font-size="9">Shampoo (2018)</text> |
| <line x1="35" y1="78" x2="65" y2="78" stroke="#7BA05B" stroke-width="3"/> |
| <text x="75" y="82" fill="#5A6978" font-family="Inter" font-size="9">SOAP (2024)</text> |
| <line x1="35" y1="98" x2="65" y2="98" stroke="#8B9DC3" stroke-width="3"/> |
| <text x="75" y="102" fill="#5A6978" font-family="Inter" font-size="9">Muon (2024)</text> |
| <line x1="35" y1="118" x2="65" y2="118" stroke="#C4849B" stroke-width="3" stroke-dasharray="8 4"/> |
| <text x="75" y="122" fill="#5A6978" font-family="Inter" font-size="9">CASPR (2023)</text> |
| </svg> |
| </div> |
|
|
| |
| <div class="optimizer-garden"> |
| <div class="optimizer-card shampoo"> |
| <div class="optimizer-icon">🧴</div> |
| <h4>Shampoo</h4> |
| <div class="year">Gupta, Anil et al. — 2018</div> |
| <p>The progenitor. Maintains Kronecker-factored preconditioners L and R, capturing row and column gradient statistics separately.</p> |
| <div class="equation"> |
| H = L<sup>−¼</sup> G R<sup>−¼</sup> |
| </div> |
| <div class="highlight-stat"> |
| <span class="value">40%</span> |
| <span class="label">faster wall-clock vs Adam</span> |
| </div> |
| </div> |
|
|
| <div class="optimizer-card soap"> |
| <div class="optimizer-icon">🫧</div> |
| <h4>SOAP</h4> |
| <div class="year">Vyas et al. — 2024</div> |
| <p>Shampoo's refined heir. Runs Adam in the eigenbasis of Shampoo's preconditioner, combining the best of both worlds.</p> |
| <div class="equation"> |
| Adam in Q<sup>T</sup>WP basis |
| </div> |
| <div class="highlight-stat"> |
| <span class="value">40%+</span> |
| <span class="label">fewer iterations vs AdamW</span> |
| </div> |
| </div> |
|
|
| <div class="optimizer-card muon"> |
| <div class="optimizer-icon">μ</div> |
| <h4>Muon</h4> |
| <div class="year">Keller Jordan — 2024</div> |
| <p>The minimalist. Orthogonalizes momentum via Newton-Schulz iteration. No second moments, half the memory of Adam.</p> |
| <div class="equation"> |
| G̃ = NS(momentum) |
| </div> |
| <div class="highlight-stat"> |
| <span class="value">2×</span> |
| <span class="label">compute efficiency vs AdamW</span> |
| </div> |
| </div> |
|
|
| <div class="optimizer-card caspr"> |
| <div class="optimizer-icon">∑</div> |
| <h4>CASPR</h4> |
| <div class="year">OpenReview — 2023</div> |
| <p>The theoretician. Combines axis preconditioners via Kronecker-sum approximation. Shampoo is its special case.</p> |
| <div class="equation"> |
| P ≈ L ⊕ R (Kron-sum) |
| </div> |
| <div class="highlight-stat"> |
| <span class="value">Tighter</span> |
| <span class="label">convergence bounds</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="family-tree"> |
| <h5>L'Arbre Généalogique des Optimiseurs</h5> |
| <svg class="family-tree-svg" viewBox="0 0 700 280" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| |
| <rect x="275" y="10" width="150" height="50" rx="8" fill="#F5F0E8" stroke="#C4B4A4" stroke-width="1.5"/> |
| <text x="350" y="32" text-anchor="middle" fill="#5A6978" font-family="Fraunces, Georgia" font-size="11">Full-Matrix Adagrad</text> |
| <text x="350" y="48" text-anchor="middle" fill="#A0AEC0" font-family="Inter" font-size="9">O(n⁴) — impractical</text> |
|
|
| |
| <path d="M350 60 L350 90" stroke="#C4B4A4" stroke-width="1.5" marker-end="url(#arrowhead)"/> |
| <defs> |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> |
| <polygon points="0 0, 10 3.5, 0 7" fill="#C4B4A4"/> |
| </marker> |
| </defs> |
|
|
| |
| <rect x="275" y="95" width="150" height="55" rx="8" fill="#FFF8F0" stroke="#D4A574" stroke-width="2"/> |
| <text x="350" y="118" text-anchor="middle" fill="#C49A6C" font-family="Fraunces, Georgia" font-size="13" font-weight="500">Shampoo</text> |
| <text x="350" y="136" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">Kronecker factorization</text> |
|
|
| |
| <path d="M275 122 L180 122 L180 175" stroke="#C4B4A4" stroke-width="1.5"/> |
| <path d="M425 122 L520 122 L520 175" stroke="#C4B4A4" stroke-width="1.5"/> |
| <path d="M350 150 L350 175" stroke="#C4B4A4" stroke-width="1.5"/> |
|
|
| |
| <rect x="105" y="180" width="150" height="55" rx="8" fill="#FFF5F8" stroke="#C4849B" stroke-width="2"/> |
| <text x="180" y="203" text-anchor="middle" fill="#B47488" font-family="Fraunces, Georgia" font-size="12" font-weight="500">CASPR</text> |
| <text x="180" y="221" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">Kronecker-sum approx.</text> |
|
|
| |
| <rect x="275" y="180" width="150" height="55" rx="8" fill="#F0FFF4" stroke="#7BA05B" stroke-width="2"/> |
| <text x="350" y="203" text-anchor="middle" fill="#6B9B4B" font-family="Fraunces, Georgia" font-size="12" font-weight="500">SOAP</text> |
| <text x="350" y="221" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">+ Adam in eigenbasis</text> |
|
|
| |
| <path d="M180 235 L180 260 L350 260 L350 280" stroke="#C4B4A4" stroke-width="1.5" stroke-dasharray="4 4"/> |
| <text x="265" y="272" fill="#A0AEC0" font-family="Inter" font-size="8" font-style="italic">without accumulation</text> |
|
|
| |
| <rect x="445" y="180" width="150" height="55" rx="8" fill="#F0F4FF" stroke="#8B9DC3" stroke-width="2"/> |
| <text x="520" y="203" text-anchor="middle" fill="#7B8DB3" font-family="Fraunces, Georgia" font-size="12" font-weight="500">Muon</text> |
| <text x="520" y="221" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">Newton-Schulz orthog.</text> |
|
|
| |
| <rect x="480" y="245" width="180" height="30" rx="6" fill="#FFF8DC" stroke="#D4A574" stroke-width="1" stroke-dasharray="3 3"/> |
| <text x="570" y="265" text-anchor="middle" fill="#8B7355" font-family="Fraunces, Georgia" font-size="9" font-style="italic">"CASPR − accumulation = Muon"</text> |
| </svg> |
| </div> |
|
|
| <div class="impressionist-quote"> |
| <blockquote> |
| "As the impressionists captured light through countless small brushstrokes, so too do these optimizers approximate the curvature of loss through elegant factorizations — each revealing truth through its own particular lens." |
| </blockquote> |
| <cite>— On the Art of Optimization</cite> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="focus" id="focus"> |
| <div class="focus-header reveal"> |
| <span class="section-label">Focus Areas</span> |
| <h2 class="section-title">Where we direct our resources</h2> |
| <p class="section-text">We fund work across six interconnected domains, each critical to building beneficial AI systems.</p> |
| </div> |
| <div class="focus-grid"> |
| <div class="focus-card reveal"> |
| <span class="focus-card-number">01</span> |
| <h4>Optimization Theory</h4> |
| <p>Advancing second-order methods, adaptive algorithms, and theoretical foundations that make training more efficient and reliable.</p> |
| </div> |
| <div class="focus-card reveal"> |
| <span class="focus-card-number">02</span> |
| <h4>Large-Scale Systems</h4> |
| <p>Enabling efficient distributed training across thousands of accelerators with minimal overhead and maximum reproducibility.</p> |
| </div> |
| <div class="focus-card reveal"> |
| <span class="focus-card-number">03</span> |
| <h4>AI Safety & Alignment</h4> |
| <p>Ensuring advanced AI systems remain beneficial, interpretable, and aligned with human values as capabilities scale.</p> |
| </div> |
| <div class="focus-card reveal"> |
| <span class="focus-card-number">04</span> |
| <h4>Open Infrastructure</h4> |
| <p>Building and maintaining open-source frameworks, tools, and compute resources accessible to researchers worldwide.</p> |
| </div> |
| <div class="focus-card reveal"> |
| <span class="focus-card-number">05</span> |
| <h4>Scientific Applications</h4> |
| <p>Applying ML to accelerate discovery in biology, climate science, materials research, and other high-impact domains.</p> |
| </div> |
| <div class="focus-card reveal"> |
| <span class="focus-card-number">06</span> |
| <h4>Researcher Development</h4> |
| <p>Fellowships, mentorship programs, and grants for early-career researchers pursuing ambitious, unconventional ideas.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="founder" id="founder"> |
| <div class="founder-container"> |
| <div class="founder-image-container reveal"> |
| <div class="founder-image"> |
| <div class="founder-image-placeholder">RA</div> |
| </div> |
| <div class="founder-image-border"></div> |
| </div> |
| <div class="founder-content reveal"> |
| <span class="founder-label">Founder</span> |
| <h2 class="founder-name">Rohan Anil</h2> |
| <p class="founder-role">Researcher & Philanthropist</p> |
| <p class="founder-bio">Rohan Anil is a pioneering researcher whose work on the Shampoo optimizer transformed our understanding of practical second-order optimization in deep learning. His contributions—described as "a breakthrough in deep learning practical optimization at scale"—demonstrated that methods once considered computationally prohibitive could achieve state-of-the-art results.</p> |
| <p class="founder-bio">Having witnessed firsthand how resource constraints limit scientific progress, Rohan established The Shampoo Foundation to ensure the next generation of researchers has the support to pursue transformative ideas without barriers.</p> |
| <div class="founder-links"> |
| <a href="https://scholar.google.com/citations?user=m2qHgbwAAAAJ&hl=en" target="_blank" class="founder-link"> |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 24a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-24L0 9.5l4.838 3.94A8 8 0 0 1 12 9a8 8 0 0 1 7.162 4.44L24 9.5z"/></svg> |
| Google Scholar |
| </a> |
| <a href="https://arxiv.org/abs/2002.09018" target="_blank" class="founder-link"> |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg> |
| Shampoo Paper |
| </a> |
| <a href="https://github.com/google-research/google-research/tree/master/scalable_shampoo" target="_blank" class="founder-link"> |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> |
| GitHub |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="quote"> |
| <div class="quote-container reveal"> |
| <div class="quote-mark">"</div> |
| <blockquote>The most profound advances in science come when brilliant people have the freedom to pursue ambitious ideas. Our role is simply to remove the obstacles.</blockquote> |
| <cite>— Rohan Anil, Founder</cite> |
| </div> |
| </section> |
|
|
| <section class="apply" id="apply"> |
| <div class="apply-container reveal"> |
| <span class="section-label">Apply for Funding</span> |
| <h2 class="apply-title">Ready to advance the field?</h2> |
| <p class="apply-description">We welcome proposals from researchers, institutions, and organizations working on fundamental problems in machine learning, optimization, and AI safety.</p> |
| <a href="mailto:grants@shampoofoundation.org" class="apply-cta"> |
| Begin Application |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> |
| </a> |
| <p class="apply-note">Applications reviewed on a rolling basis. Typical response within 6-8 weeks.</p> |
| </div> |
| </section> |
|
|
| <footer> |
| <div class="footer-container"> |
| <div class="footer-main"> |
| <div class="footer-brand"> |
| <a href="#" class="footer-logo"> |
| <span class="logo-mark">SF</span> |
| The Shampoo Foundation |
| </a> |
| <p class="footer-tagline">A non-profit foundation committed to funding transformative research in machine learning and AI for the benefit of humanity.</p> |
| </div> |
| <div class="footer-column"> |
| <h5>Foundation</h5> |
| <ul> |
| <li><a href="#mission">Mission</a></li> |
| <li><a href="#focus">Focus Areas</a></li> |
| <li><a href="#founder">Leadership</a></li> |
| <li><a href="#">Annual Report</a></li> |
| </ul> |
| </div> |
| <div class="footer-column"> |
| <h5>Funding</h5> |
| <ul> |
| <li><a href="#apply">Apply for Grant</a></li> |
| <li><a href="#">Grant Guidelines</a></li> |
| <li><a href="#">Past Recipients</a></li> |
| <li><a href="#">FAQ</a></li> |
| </ul> |
| </div> |
| <div class="footer-column"> |
| <h5>Research</h5> |
| <ul> |
| <li><a href="https://arxiv.org/abs/2002.09018" target="_blank">Shampoo Paper</a></li> |
| <li><a href="https://github.com/google-research/google-research/tree/master/scalable_shampoo" target="_blank">Open Source</a></li> |
| <li><a href="#">Publications</a></li> |
| <li><a href="#">Events</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="footer-bottom"> |
| <p class="footer-copyright">© 2026 The Shampoo Foundation. All rights reserved. 501(c)(3) Non-Profit Organization.</p> |
| <div class="footer-legal"> |
| <a href="#">Privacy Policy</a> |
| <a href="#">Terms of Use</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const navbar = document.getElementById('navbar'); |
| window.addEventListener('scroll', () => { |
| if (window.scrollY > 50) { |
| navbar.classList.add('scrolled'); |
| } else { |
| navbar.classList.remove('scrolled'); |
| } |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.15, |
| rootMargin: '0px 0px -60px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach((entry, index) => { |
| if (entry.isIntersecting) { |
| setTimeout(() => { |
| entry.target.classList.add('active'); |
| }, index * 100); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.reveal').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| 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' |
| }); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
