/* ── Logo ── */
.logo-wrap {
margin-bottom: 8px;
opacity: 0;
animation: fadeUp 1s ease 0.2s forwards;
position: relative;
}
.logo-wrap::before {
content: '';
position: absolute;
inset: -20px;
background: radial-gradient(ellipse, var(--glow1) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.logo-img {
width: min(480px, 85vw);
height: auto;
filter: var(--logo-filter);
drop-shadow:(0 0 30px var(--glow1));
transition: filter 0.6s;
}
/* ── Separator line ── */
.divider {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, transparent, var(--accent1), transparent);
margin: 4px 0 32px;
opacity: 0;
animation: fadeIn 1s ease 0.7s forwards;
}
/* ── Coming Soon badge ── */
.badge {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--accent2);
border: 1px solid var(--accent2);
padding: 6px 20px;
border-radius: 2px;
opacity: 0;
animation: fadeUp 1s ease 0.9s forwards;
position: relative;
overflow: hidden;
}
.badge::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(77,212,160,0.2), transparent);
animation: shimmer 3s ease 2s infinite;
}
@keyframes shimmer { to { left: 200%; } }
/* ── Headline ── */
.headline {
font-family: 'Cinzel', serif;
font-size: clamp(38px, 7vw, 78px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -1px;
margin: 24px 0 0;
opacity: 0;
animation: fadeUp 1.2s ease 1.1s forwards;
background: linear-gradient(135deg, var(--accent1) 0%, var(--text) 50%, var(--accent2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Sub-tagline ── */
.tagline {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(17px, 2.5vw, 23px);
color: var(--text-muted);
margin-top: 14px;
letter-spacing: 0.5px;
opacity: 0;
animation: fadeUp 1s ease 1.4s forwards;
}
/* ── Countdown ── */
.countdown-wrap {
display: flex;
gap: 16px;
margin-top: 48px;
opacity: 0;
animation: fadeUp 1s ease 1.6s forwards;
}
.count-item {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 24px 14px;
min-width: 80px;
backdrop-filter: blur(16px);
position: relative;
overflow: hidden;
transition: border-color 0.3s, transform 0.3s;
}
.count-item:hover { border-color: var(--accent1); transform: translateY(-4px); }
.count-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent1), transparent);
}
.count-num {
font-family: 'Cinzel', serif;
font-size: 36px;
font-weight: 700;
color: var(--accent1);
line-height: 1;
display: block;
}
.count-label {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 6px;
display: block;
}
/* ── Email input ── */
.notify-wrap {
margin-top: 48px;
display: flex;
gap: 0;
width: 100%;
max-width: 460px;
opacity: 0;
animation: fadeUp 1s ease 1.8s forwards;
}
.notify-input {
flex: 1;
background: var(--card-bg);
border: 1px solid var(--border);
border-right: none;
border-radius: 4px 0 0 4px;
padding: 14px 20px;
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
letter-spacing: 1.5px;
color: var(--text);
outline: none;
transition: border-color 0.3s;
backdrop-filter: blur(16px);
}
.notify-input::placeholder { color: var(--text-muted); }
.notify-input:focus { border-color: var(--accent1); }
.notify-btn {
background: linear-gradient(135deg, var(--accent3), var(--accent1));
border: none;
border-radius: 0 4px 4px 0;
padding: 14px 24px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #fff;
cursor: pointer;
transition: opacity 0.2s, box-shadow 0.3s;
white-space: nowrap;
}
.notify-btn:hover { opacity: 0.88; box-shadow: 0 4px 24px var(--glow1); }
.notify-success {
display: none;
font-size: 12px;
letter-spacing: 2px;
color: var(--accent2);
margin-top: 10px;
text-transform: uppercase;
}
/* ── Social icons ── */
.socials {
display: flex;
gap: 20px;
margin-top: 40px;
opacity: 0;
animation: fadeIn 1s ease 2s forwards;
}
.social-link {
width: 42px; height: 42px;
border: 1px solid var(--border);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.social-link:hover { border-color: var(--accent1); color: var(--accent1); box-shadow: 0 0 16px var(--glow1); transform: translateY(-2px); }
/* ── Credentials ── */
.credentials {
margin-top: 60px;
padding-top: 32px;
border-top: 1px solid var(--border);
width: 100%;
max-width: 400px;
opacity: 0;
animation: fadeIn 1.2s ease 2.2s forwards;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.cred-by {
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-muted);
}
.cred-name {
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 700;
background: linear-gradient(135deg, var(--accent1), var(--accent2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 2px;
}
.cred-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 14px;
color: var(--text-muted);
letter-spacing: 1px;
margin-top: 2px;
}
.cred-logo-small {
width: 36px;
height: 36px;
object-fit: contain;
margin-bottom: 8px;
opacity: 0.7;
}
/* ── Particle canvas ── */
#particle-canvas {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
}
/* ── Animations ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Cursor glow ── */
.cursor-glow {
position: fixed;
width: 300px; height: 300px;
border-radius: 50%;
background: radial-gradient(circle, var(--glow1) 0%, transparent 70%);
pointer-events: none;
z-index: 3;
transform: translate(-50%, -50%);
transition: opacity 0.3s;
opacity: 0;
}
/* ── Responsive ── */
@media (max-width: 520px) {
.countdown-wrap { gap: 10px; }
.count-item { min-width: 62px; padding: 14px 14px 10px; }
.count-num { font-size: 28px; }
.notify-wrap { flex-direction: column; }
.notify-input { border-right: 1px solid var(--border); border-bottom: none; border-radius: 4px 4px 0 0; }
.notify-btn { border-radius: 0 0 4px 4px; padding: 14px; }
}
Coming Soon
Something Big
Is Coming
The future is being built. We're making sure it's Possible.
00
Days
00
Hours
00
Mins
00
Secs
✦ You're on the list!
Founded by
Harshit Padia
CEO & Founder, Possible1
