<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chitrali Stories – Coming Soon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(circle at top, #111827, #020617);
color: #f9fafb;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.wrapper {
max-width: 960px;
width: 100%;
border-radius: 18px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(15, 23, 42, 0.9);
overflow: hidden;
display: grid;
grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 800px) {
.wrapper {
grid-template-columns: 1fr;
}
}
.content {
padding: 2.5rem 2.75rem;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(56, 189, 248, 0.15);
color: #e0f2fe;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 10px rgba(34, 197, 94, 0.9);
}
h1 {
font-size: clamp(2.1rem, 3vw, 2.7rem);
line-height: 1.1;
margin-bottom: 0.75rem;
}
h1 span.highlight {
background-image: linear-gradient(120deg, #38bdf8, #f97316, #facc15);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.subtitle {
font-size: 0.98rem;
color: #cbd5f5;
max-width: 30rem;
line-height: 1.6;
margin-bottom: 1.75rem;
}
.teaser {
font-size: 0.9rem;
color: #e5e7eb;
margin-bottom: 1.5rem;
border-left: 2px solid rgba(148, 163, 184, 0.6);
padding-left: 0.9rem;
}
.teaser strong {
color: #f97316;
}
form {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
input[type="email"] {
flex: 1 1 180px;
padding: 0.75rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: rgba(15, 23, 42, 0.8);
color: #e5e7eb;
font-size: 0.9rem;
outline: none;
}
input[type="email"]::placeholder {
color: #9ca3af;
}
button.notify {
padding: 0.75rem 1.4rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
background: linear-gradient(135deg, #38bdf8, #f97316);
color: #0b1120;
box-shadow: 0 10px 25px rgba(56, 189, 248, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
}
button.notify:hover {
transform: translateY(-1px);
box-shadow: 0 16px 40px rgba(56, 189, 248, 0.6);
}
.meta {
font-size: 0.78rem;
color: #9ca3af;
}
.meta span {
opacity: 0.9;
}
.meta b {
color: #e5e7eb;
font-weight: 500;
}
.image-panel {
position: relative;
min-height: 260px;
overflow: hidden;
}
.image-panel::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 0, rgba(251, 113, 133, 0.16), transparent 55%),
radial-gradient(circle at 90% 100%, rgba(56, 189, 248, 0.16), transparent 55%),
linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.1));
z-index: 0;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
padding: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.teaser-card {
position: relative;
border-radius: 20px;
overflow: hidden;
width: 100%;
max-width: 360px;
aspect-ratio: 3 / 4;
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow:
0 25px 55px rgba(15, 23, 42, 0.9),
0 0 0 1px rgba(15, 23, 42, 0.9);
background: radial-gradient(circle at 30% 0, #020617, #020617 45%, #111827);
}
.teaser-card img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: saturate(1.1) contrast(1.1);
display: block;
}
.teaser-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.94), transparent 45%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
gap: 0.4rem;
}
.tagline {
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #e5e7eb;
opacity: 0.96;
}
.hook {
font-size: 1rem;
color: #f9fafb;
font-weight: 600;
line-height: 1.4;
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.7);
font-size: 0.7rem;
color: #e5e7eb;
}
.pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #f97316;
box-shadow: 0 0 10px rgba(248, 150, 30, 0.95);
}
@media (max-width: 800px) {
.content {
padding: 1.9rem 1.6rem 2.1rem;
}
.image-panel {
order: -1;
}
.image-wrapper {
padding: 1.25rem;
}
}
</style>
</head>
<body>
<div class="wrapper">
<section class="content">
<div class="badge">
<span class="badge-dot"></span>
New storytellers are arriving
</div>
<h1>
<span class="highlight">Chitrali</span> is almost here
</h1>
<p class="subtitle">
A home for immersive Urdu and Hindi stories, whispered late at night and brought to life on YouTube.
Secret premiers and early episodes are on the way.
</p>
<p class="teaser">
First chapter unlocks soon. <strong>If you like to be first in line, leave your email and watch what happens.</strong>
</p>
<!-- Optional email capture. This is just visual, it does not submit anywhere yet. -->
<form onsubmit="return false;">
<input type="email" placeholder="Enter your email to get the first story">
<button class="notify" type="submit">Notify me when it drops</button>
</form>
<p class="meta">
<span>Working on:</span>
<b> Urdu tales, Hindi kahaniyan, atmospheric audio, and YouTube story nights. </b>
</p>
</section>
<aside class="image-panel">
<div class="image-wrapper">
<!--
Replace teaser-image.jpg with your real image file.
Put the image inside the same folder as index.html or an /images folder and update the path.
-->
<figure class="teaser-card">
<img src="teaser-image.jpg" alt="A mysterious dimly lit scene hinting at a story that is about to begin">
<div class="teaser-overlay">
<div class="tagline">Something is about to be told</div>
<div class="hook">
Shadows move. A voice leans in.
The first Chitrali story starts with you.
</div>
<div class="pill">
<span class="pill-dot"></span>
Watch for the first night premiere soon
</div>
</div>
</figure>
</div>
</aside>
</div>
</body>
</html>