<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Independent Journalism Atlas - Coming Soon</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=Hanken+Grotesk:wght@400;600;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: #000000;
color: #FFFFFF;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
text-align: center;
max-width: 700px;
width: 100%;
}
.logo-container {
margin-bottom: 2.5rem;
}
.logo-svg {
width: 200px;
height: 200px;
margin: 0 auto;
}
h1 {
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
.tagline {
font-size: 1.35rem;
font-weight: 400;
margin-bottom: 2.5rem;
color: #fefeff;
line-height: 1.5;
}
.launch-date {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 3rem;
color: #ceff00;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.email-form {
margin: 3rem auto;
max-width: 500px;
}
.form-group {
display: flex;
gap: 12px;
flex-direction: column;
}
input[type="email"] {
padding: 16px 20px;
font-size: 1rem;
font-family: 'Hanken Grotesk', sans-serif;
border: 2px solid #313131;
background-color: #000000;
color: #FFFFFF;
border-radius: 4px;
width: 100%;
transition: all 0.3s;
}
input[type="email"]:focus {
outline: none;
border-color: #ceff00;
background-color: #0a0a0a;
}
input[type="email"]::placeholder {
color: #313131;
}
button {
padding: 16px 48px;
font-size: 1rem;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 600;
background: #ceff00;
color: #000000;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
letter-spacing: 0.02em;
}
button:hover {
background: #e0ff33;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(206, 255, 0, 0.3);
}
button:active {
transform: translateY(0);
}
.contact {
margin-top: 4rem;
font-size: 0.95rem;
color: #fefeff;
}
.contact a {
color: #ceff00;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
}
.contact a:hover {
border-bottom-color: #ceff00;
}
@media (min-width: 640px) {
.form-group {
flex-direction: row;
}
input[type="email"] {
flex: 1;
}
button {
flex-shrink: 0;
}
}
@media (max-width: 640px) {
h1 {
font-size: 2rem;
}
.tagline {
font-size: 1.1rem;
}
.logo-svg {
width: 150px;
height: 150px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo-container">
<!-- Atlas Logo SVG -->
<svg class="logo-svg" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="95" stroke="#FFFFFF" stroke-width="3"/>
<!-- Globe lines -->
<ellipse cx="100" cy="100" rx="95" ry="40" stroke="#FFFFFF" stroke-width="2"/>
<ellipse cx="100" cy="100" rx="95" ry="65" stroke="#FFFFFF" stroke-width="2"/>
<line x1="100" y1="5" x2="100" y2="195" stroke="#FFFFFF" stroke-width="2"/>
<line x1="45" y1="20" x2="155" y2="180" stroke="#FFFFFF" stroke-width="2"/>
<line x1="155" y1="20" x2="45" y2="180" stroke="#FFFFFF" stroke-width="2"/>
<!-- ATLAS text in center -->
<text x="100" y="110" font-family="Hanken Grotesk, sans-serif" font-size="38" font-weight="700" fill="#FFFFFF" text-anchor="middle">ATLAS</text>
<!-- Dots -->
<circle cx="20" cy="100" r="3" fill="#FFFFFF"/>
<circle cx="180" cy="100" r="3" fill="#FFFFFF"/>
<!-- Circular text would go here but requires complex path - simplified for now -->
</svg>
</div>
<h1>The Independent Journalism Atlas</h1>
<p class="tagline">Infrastructure for the Future of Journalism</p>
<p class="launch-date">Launching December 18, 2025</p>
<div class="email-form">
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
<div class="form-group">
<input type="email" name="email" placeholder="Enter your email for updates" required>
<button type="submit">Notify Me</button>
</div>
</form>
</div>
<div class="contact">
<p>Questions? <a href="mailto:hello@journalismatlas.com">hello@journalismatlas.com</a></p>
</div>
</div>
</body>
</html>