<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ΞQUΛLIST™ — Balanced By Science.</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
--black: #0A0A0A;
--white: #FFFFFF;
--cream: #F8F6F2;
--cream2: #F0EEEA;
--g30: #2A2A2A;
--g55: #555555;
--g88: #888888;
--g110: #AAAAAA;
--rule: #CCCCCC;
}
html, body {
height: 100%;
font-family: 'Montserrat', sans-serif;
background: var(--black);
color: var(--white);
overflow: hidden;
}
/* Full screen layout */
.page {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1px 1fr;
grid-template-rows: 1fr;
}
/* Left panel */
.left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px;
position: relative;
}
/* Divider */
.divider {
background: var(--g30);
height: 100%;
margin: 80px 0;
}
/* Right panel */
.right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px;
position: relative;
}
/* Top bar */
.top-bar {
position: fixed;
top: 0; left: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 80px;
border-bottom: 1px solid var(--g30);
z-index: 10;
}
.top-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 3px;
color: var(--g88);
text-transform: uppercase;
}
/* Bottom bar */
.bottom-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 80px;
border-top: 1px solid var(--g30);
}
.bottom-text {
font-size: 11px;
font-weight: 300;
letter-spacing: 1px;
color: var(--g55);
}
/* Logo */
.logo-wrap {
margin-bottom: 48px;
}
.logo-text {
font-size: 42px;
font-weight: 700;
letter-spacing: 8px;
color: var(--white);
line-height: 1;
margin-bottom: 8px;
}
.logo-tag {
font-size: 10px;
font-weight: 400;
letter-spacing: 5px;
color: var(--g88);
}
/* Hairline rule */
.rule {
width: 48px;
height: 1px;
background: var(--g30);
margin: 40px 0;
}
/* Left headline */
.headline {
font-family: 'Cormorant Garamond', serif;
font-size: 38px;
font-weight: 300;
font-style: italic;
color: var(--g88);
line-height: 1.4;
margin-bottom: 24px;
}
/* Left descriptors */
.descriptors {
display: flex;
flex-direction: column;
gap: 10px;
}
.descriptor {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 400;
letter-spacing: 2px;
color: var(--g55);
text-transform: uppercase;
}
.descriptor::before {
content: '';
width: 20px;
height: 1px;
background: var(--g30);
flex-shrink: 0;
}
/* Right side */
.right-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 4px;
color: var(--g55);
text-transform: uppercase;
margin-bottom: 32px;
}
.right-headline {
font-family: 'Cormorant Garamond', serif;
font-size: 64px;
font-weight: 300;
font-style: italic;
line-height: 1.1;
margin-bottom: 48px;
}
.right-headline span {
color: var(--g55);
display: block;
}
/* Form */
.form-group {
position: relative;
margin-bottom: 16px;
}
.email-input {
width: 100%;
padding: 18px 20px;
background: transparent;
border: 1px solid var(--g30);
color: var(--white);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 300;
letter-spacing: 1px;
outline: none;
transition: border-color 0.2s;
}
.email-input::placeholder {
color: var(--g55);
font-size: 12px;
letter-spacing: 1px;
}
.email-input:focus {
border-color: var(--g88);
}
.submit-btn {
width: 100%;
padding: 18px 20px;
background: var(--white);
border: none;
color: var(--black);
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.submit-btn:hover {
background: var(--cream2);
}
.form-note {
font-size: 10px;
font-weight: 300;
color: var(--g55);
letter-spacing: 1px;
margin-top: 16px;
line-height: 1.6;
}
/* Success state */
.success-msg {
display: none;
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
font-style: italic;
color: var(--g88);
line-height: 1.5;
padding: 32px 0;
border-top: 1px solid var(--g30);
border-bottom: 1px solid var(--g30);
}
/* Fade in animation */
@keyframes fadeUp {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
.left { animation: fadeUp 0.8s ease 0.2s both; }
.right { animation: fadeUp 0.8s ease 0.4s both; }
/* Mobile */
@media (max-width: 768px) {
html, body { overflow: auto; }
.page {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
height: auto;
min-height: 100vh;
}
.divider { display: none; }
.left, .right {
padding: 100px 32px 48px;
}
.top-bar, .bottom-bar {
padding: 20px 32px;
}
.logo-text { font-size: 28px; }
.headline { font-size: 28px; }
.right-headline { font-size: 44px; }
.bottom-text { font-size: 9px; }
.top-label { font-size: 8px; letter-spacing: 2px; }
}
</style>
</head>
<body>
<!-- TOP BAR -->
<div class="top-bar">
<span class="top-label">Premium Science-Led Skincare · Goa, India</span>
<span class="top-label">2026</span>
</div>
<!-- MAIN PAGE -->
<div class="page">
<!-- LEFT — Brand Identity -->
<div class="left">
<div class="logo-wrap">
<div class="logo-text">ΞQUΛLIST™</div>
<div class="logo-tag">B A L A N C E D B Y S C I E N C E .</div>
</div>
<div class="rule"></div>
<p class="headline">Where science<br>meets skin.</p>
<div class="descriptors">
<div class="descriptor">Fragrance-Free</div>
<div class="descriptor">pH Balanced</div>
<div class="descriptor">Dermatologist Tested</div>
<div class="descriptor">Science-Led Formulations</div>
</div>
</div>
<!-- DIVIDER -->
<div class="divider"></div>
<!-- RIGHT — Email Signup -->
<div class="right">
<div class="right-label">Be the first to know</div>
<div class="right-headline">
Launch<br>
<span>is coming.</span>
</div>
<div id="form-wrap">
<div class="form-group">
<input
type="email"
class="email-input"
id="email-input"
placeholder="Enter your email address"
autocomplete="email"
/>
</div>
<button class="submit-btn" onclick="handleSubmit()">
Notify Me at Launch
</button>
<p class="form-note">
No spam. One email when we launch.<br>
Unsubscribe anytime.
</p>
</div>
<div class="success-msg" id="success-msg">
You are on the list.<br>
We will be in touch.
</div>
</div>
</div>
<!-- BOTTOM BAR -->
<div class="bottom-bar">
<span class="bottom-text">hello@eqalist.com</span>
<span class="bottom-text">@eqalistofficial</span>
<span class="bottom-text">www.eqalist.com</span>
</div>
<script>
function handleSubmit() {
const email = document.getElementById('email-input').value.trim();
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!re.test(email)) {
document.getElementById('email-input').style.borderColor = '#555';
document.getElementById('email-input').placeholder = 'Please enter a valid email';
return;
}
// Hide form show success
document.getElementById('form-wrap').style.display = 'none';
document.getElementById('success-msg').style.display = 'block';
// In production connect to Shopify / Klaviyo / Mailchimp API here
console.log('Email captured:', email);
}
// Enter key submits
document.addEventListener('keydown', function(e) {
if (e.key === 'Enter') handleSubmit();
});
</script>
</body>
</html>