/* CSS Variables for Light/Dark Theme */ :root { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --text-primary: #1a1a1a; --text-secondary: #666666; --border-color: #e5e5e5; --beammp-blue: #4470B6; --beammp-orange: #F36D24; } @media (prefers-color-scheme: dark) { :root { --bg-primary: #1a1a1a; --bg-secondary: #2a2a2a; --text-primary: #ffffff; --text-secondary: #a0a0a0; --border-color: rgba(255, 255, 255, 0.1); } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Header/Navigation */ header { border-bottom: 1px solid var(--border-color); background-color: var(--bg-primary); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); } nav { display: flex; align-items: center; justify-content: space-between; height: 4rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .logo img { height: 4rem; width: auto; } @media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } } @media (prefers-color-scheme: light) { .logo-light { display: block; } .logo-dark { display: none; } } .nav-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; align-items: center; } .nav-links a { color: var(--text-primary); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s; } .nav-links a:hover { background-color: var(--bg-secondary); } /* Hero Section */ .hero { text-align: center; padding: 4rem 1rem; background: linear-gradient(135deg, var(--beammp-blue) 0%, var(--beammp-orange) 100%); color: white; } .hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; } .hero p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; } .cta-button { display: inline-block; background-color: white; color: var(--beammp-blue); padding: 0.875rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* Stats Section */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding: 3rem 1rem; background-color: var(--bg-secondary); } .stat-card { text-align: center; padding: 2rem; background-color: var(--bg-primary); border-radius: 0.5rem; border: 1px solid var(--border-color); } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--beammp-blue); margin-bottom: 0.5rem; } .stat-label { color: var(--text-secondary); font-size: 1rem; } /* Features Section */ .features { padding: 4rem 1rem; } .section-title { text-align: center; font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .feature-card { padding: 2rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background-color: var(--bg-primary); } .feature-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--beammp-blue); } .feature-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .feature-description { color: var(--text-secondary); } /* Info Section */ .info { padding: 4rem 1rem; background-color: var(--bg-secondary); } .info-content { max-width: 800px; margin: 0 auto; text-align: center; } .info-content h2 { font-size: 2rem; margin-bottom: 1.5rem; } .info-content p { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 2rem; } .button-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .button { padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; transition: transform 0.2s; } .button-primary { background-color: var(--beammp-blue); color: white; } .button-secondary { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); } .button:hover { transform: translateY(-2px); } /* Footer */ footer { margin-top: auto; padding: 2rem 1rem; border-top: 1px solid var(--border-color); background-color: var(--bg-primary); } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; } .social-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; } .social-link { color: var(--text-secondary); transition: color 0.2s; text-decoration: none; } .social-link:hover { color: var(--beammp-blue); } .footer-legal { text-align: center; color: var(--text-secondary); font-size: 0.875rem; } .footer-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .footer-links a { color: var(--text-secondary); text-decoration: none; } .footer-links a:hover { color: var(--beammp-blue); } /* Responsive */ @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .nav-links { display: none; } .section-title { font-size: 2rem; } } /* JS Warning */ .js-notice { background-color: #fff3cd; color: #856404; padding: 1rem; text-align: center; font-weight: 500; } @media (prefers-color-scheme: dark) { .js-notice { background-color: #664d03; color: #ffecb5; } } /* Hide noscript content when JS loads */ .noscript-page { display: block; } /* SVG Icons */ .icon { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; }

⚠️ JavaScript is disabled. For the best experience, please enable JavaScript in your browser.

BeamMP

Multiplayer for BeamNG.drive

Download Now

2000+

Online Players

3000+

Active Servers

100%

Certified Fun!

Why Choose BeamMP?

Stable & Reliable

Enjoy smooth multiplayer gameplay with our optimized server infrastructure.

Easy to Use

Simple installation and setup process. Get playing within minutes!

Global Community

Join thousands of players worldwide in various game modes and communities.

Mod Support

Create custom servers with Lua scripting and mod support.

Get Started Today

BeamMP is completely free and open source. Download the mod, join a server, and start playing with friends!

Download Documentation Forums