* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
–background: #0a0a0a;
–text: #f5f5f5;
–muted: #888;
–border: #242424;
}
body {
font-family: “Inter”, sans-serif;
background: var(–background);
color: var(–text);
min-height: 100vh;
}
.hero {
min-height: 100vh;
padding: 35px 6vw;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
/* Background glow */
.hero::before {
content: “”;
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.035);
filter: blur(100px);
top: 20%;
right: -200px;
pointer-events: none;
}
/* Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
}
.logo {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
}
.logo span {
opacity: 0.35;
}
.location {
color: var(–muted);
font-size: 13px;
letter-spacing: 0.5px;
}
.location span {
margin: 0 7px;
color: #fff;
}
/* Main */
.content {
position: relative;
z-index: 2;
max-width: 850px;
margin: auto 0;
padding: 100px 0;
}
.eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
color: #777;
margin-bottom: 28px;
animation: fadeUp 0.8s ease forwards;
}
h1 {
font-size: clamp(65px, 10vw, 150px);
line-height: 0.9;
letter-spacing: -7px;
font-weight: 600;
margin-bottom: 40px;
animation: fadeUp 1s ease forwards;
}
h1 span {
color: #777;
}
.description {
max-width: 450px;
color: #858585;
font-size: 15px;
line-height: 1.7;
margin-bottom: 35px;
animation: fadeUp 1.2s ease forwards;
}
/* Notify form */
.notify-form {
display: flex;
width: min(100%, 480px);
border: 1px solid var(–border);
background: #0f0f0f;
border-radius: 10px;
padding: 5px;
transition: border 0.3s ease;
animation: fadeUp 1.4s ease forwards;
}
.notify-form:focus-within {
border-color: #444;
}
.notify-form input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: white;
padding: 14px 16px;
font-family: inherit;
font-size: 13px;
}
.notify-form input::placeholder {
color: #555;
}
.notify-form button {
border: none;
background: #f5f5f5;
color: #080808;
padding: 0 18px;
border-radius: 7px;
font-family: inherit;
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: all 0.25s ease;
}
.notify-form button:hover {
background: white;
transform: translateY(-1px);
}
.notify-form button span {
margin-left: 8px;
}
/* Success */
.success {
display: none;
color: #aaa;
font-size: 13px;
margin-top: 20px;
}
.success.show {
display: block;
}
/* Footer */
footer {
display: flex;
justify-content: space-between;
color: #444;
font-size: 11px;
position: relative;
z-index: 2;
}
/* Animation */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile */
@media (max-width: 600px) {
.hero {
padding: 25px 22px;
}
.location {
font-size: 11px;
}
.content {
padding: 70px 0;
}
h1 {
font-size: clamp(58px, 17vw, 90px);
letter-spacing: -4px;
}
.description {
font-size: 14px;
max-width: 330px;
}
.notify-form {
flex-direction: column;
border: none;
background: transparent;
padding: 0;
gap: 8px;
}
.notify-form input {
border: 1px solid var(–border);
background: #0f0f0f;
border-radius: 8px;
padding: 15px;
}
.notify-form button {
height: 48px;
}
footer {
font-size: 10px;
}
}