<div class="verses-wrapper">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VERSES SKIN — Where Science, Purity & Luxury Meet</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
.verses-wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto; /* 🔥 THIS fixes center */
padding: 0 24px;
}
:root {
--black: #0a0a0a;
--white: #f8f5f0;
--gold: #c9a96e;
--gold-light: #e8d5b0;
--charcoal: #1a1a1a;
--warm-gray: #2e2c2a;
--muted: #8a8580;
--cream: #faf7f2;
--border: rgba(201,169,110,0.2);
--glow: rgba(201,169,110,0.08);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--black);
color: var(--white);
overflow-x: hidden;
cursor: none;
}
/* ── CUSTOM CURSOR ── */
.cursor {
width: 12px; height: 12px;
background: var(--gold);
border-radius: 50%;
position: fixed; top: 0; left: 0;
pointer-events: none; z-index: 9999;
transition: transform 0.15s ease, opacity 0.2s;
mix-blend-mode: difference;
}
.cursor-ring {
width: 40px; height: 40px;
border: 1px solid var(--gold);
border-radius: 50%;
position: fixed; top: 0; left: 0;
pointer-events: none; z-index: 9998;
transition: transform 0.4s cubic-bezier(.25,.46,.45,.94), opacity 0.3s;
opacity: 0.5;
}
body:hover .cursor { opacity: 1; }
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
/* ── NAVBAR ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 24px 60px;
transition: all 0.4s ease;
}
nav.scrolled {
background: rgba(10,10,10,0.95);
backdrop-filter: blur(20px);
padding: 16px 60px;
border-bottom: 1px solid var(--border);
}
.nav-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 300;
letter-spacing: 0.3em;
color: var(--white);
text-decoration: none;
}
.nav-logo span { color: var(--gold); }
.nav-links {
display: flex; gap: 36px; list-style: none;
}
.nav-links a {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.3s;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute; bottom: -3px; left: 0; width: 0; height: 1px;
background: var(--gold);
transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
background: var(--gold);
color: var(--black) !important;
padding: 10px 24px;
font-size: 10px !important;
letter-spacing: 0.2em;
text-transform: uppercase;
border-radius: 0;
transition: all 0.3s !important;
}
.nav-cta:hover { background: var(--gold-light) !important; }
.nav-cta::after { display: none !important; }
.hamburger {
display: none;
flex-direction: column; gap: 5px; cursor: pointer;
background: none; border: none; padding: 4px;
}
.hamburger span {
display: block; width: 24px; height: 1px;
background: var(--white);
transition: all 0.3s;
}
/* ── HERO ── */
#hero {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
background: radial-gradient(ellipse at 60% 40%, #1a1507 0%, var(--black) 65%);
}
.hero-particles {
position: absolute; inset: 0; pointer-events: none;
}
.particle {
position: absolute;
width: 1px; height: 1px;
background: var(--gold);
border-radius: 50%;
animation: float-particle linear infinite;
opacity: 0;
}
@keyframes float-particle {
0% { opacity: 0; transform: translateY(100vh) scale(0); }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { opacity: 0; transform: translateY(-20px) scale(1.5); }
}
.hero-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; max-width: 1300px; width: 100%;
padding: 0 60px; align-items: center;
position: relative; z-index: 2;
padding-top: 100px;
}
.hero-tag {
font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
color: var(--gold); margin-bottom: 24px;
display: flex; align-items: center; gap: 16px;
}
.hero-tag::before {
content: ''; display: inline-block; width: 40px; height: 1px;
background: var(--gold);
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(52px, 6vw, 88px);
font-weight: 300;
line-height: 1.05;
margin-bottom: 28px;
opacity: 0; transform: translateY(30px);
animation: fadeUp 1s ease 0.3s forwards;
}
.hero-title em {
font-style: italic; color: var(--gold);
}
.hero-subtitle {
font-size: 14px; line-height: 1.8;
color: var(--muted); max-width: 440px;
margin-bottom: 48px;
opacity: 0; transform: translateY(20px);
animation: fadeUp 1s ease 0.5s forwards;
}
.hero-btns {
display: flex; gap: 16px; flex-wrap: wrap;
opacity: 0; transform: translateY(20px);
animation: fadeUp 1s ease 0.7s forwards;
}
.btn-primary {
background: var(--gold);
color: var(--black);
padding: 16px 40px;
font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid var(--gold);
display: inline-block;
}
.btn-primary:hover {
background: transparent;
color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(201,169,110,0.2);
}
.btn-outline {
background: transparent;
color: var(--white);
padding: 16px 40px;
font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
display: inline-block;
}
.btn-outline:hover {
border-color: var(--gold);
color: var(--gold);
transform: translateY(-2px);
}
.hero-visual {
position: relative;
opacity: 0; transform: scale(0.95);
animation: scaleIn 1.2s ease 0.4s forwards;
}
.hero-img-wrap {
position: relative;
border: 1px solid var(--border);
overflow: hidden;
}
.hero-img-wrap::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(201,169,110,0.05) 0%, transparent 60%);
z-index: 1;
}
.hero-img-wrap img {
width: 100%; display: block;
transition: transform 0.8s ease;
}
.hero-img-wrap:hover img { transform: scale(1.03); }
.hero-badge {
position: absolute;
bottom: -24px; right: -24px;
width: 100px; height: 100px;
background: var(--gold);
border-radius: 50%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
z-index: 3;
}
.hero-badge-text {
font-family: 'Cormorant Garamond', serif;
font-size: 11px; text-align: center;
color: var(--black); line-height: 1.4;
font-weight: 600; letter-spacing: 0.05em;
text-transform: uppercase;
}
.hero-stats {
display: flex; gap: 48px; margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--border);
opacity: 0; animation: fadeUp 1s ease 0.9s forwards;
}
.stat-num {
font-family: 'Cormorant Garamond', serif;
font-size: 36px; font-weight: 300;
color: var(--gold); display: block;
}
.stat-label {
font-size: 10px; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--muted);
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
to { opacity: 1; transform: scale(1); }
}
/* ── MARQUEE ── */
.marquee-strip {
background: var(--gold);
overflow: hidden; padding: 14px 0;
position: relative;
}
.marquee-track {
display: flex; gap: 60px;
animation: marquee 25s linear infinite;
white-space: nowrap;
}
.marquee-item {
font-size: 10px; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--black);
font-weight: 600; flex-shrink: 0;
display: flex; align-items: center; gap: 20px;
}
.marquee-item::before { content: '✦'; font-size: 8px; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── SECTION COMMON ── */
section { padding: 120px 60px; }
.section-header { text-align: center; margin-bottom: 80px; }
.section-tag {
font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
color: var(--gold); display: block; margin-bottom: 20px;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(36px, 4vw, 60px); font-weight: 300;
line-height: 1.15;
}
.section-title em { font-style: italic; color: var(--gold); }
.section-sub {
font-size: 14px; color: var(--muted); margin-top: 16px;
line-height: 1.8; max-width: 500px; margin-inline: auto;
}
.divider {
width: 60px; height: 1px; background: var(--gold);
margin: 24px auto;
}
/* ── SHOP PRODUCTS ── */
#products { background: var(--charcoal); }
.products-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 2px; max-width: 1300px; margin: 0 auto;
}
.product-card {
background: var(--black);
position: relative; overflow: hidden;
display: flex; flex-direction: column;
transition: transform 0.4s ease;
}
.product-card:hover { transform: translateY(-4px); }
.product-card-inner {
display: grid; grid-template-columns: 1fr 1fr;
min-height: 520px;
}
.product-img-side {
position: relative; overflow: hidden;
background: #0f0f0f;
display: flex; align-items: center; justify-content: center;
padding: 40px;
}
.product-img-side img {
width: 80%; max-width: 260px;
transition: transform 0.6s ease;
position: relative; z-index: 2;
}
.product-card:hover .product-img-side img { transform: scale(1.06) rotate(-1deg); }
.product-img-glow {
position: absolute; inset: 0;
background: radial-gradient(circle at center, rgba(201,169,110,0.06) 0%, transparent 70%);
}
.product-info-side {
padding: 48px 40px;
display: flex; flex-direction: column; justify-content: space-between;
border-left: 1px solid var(--border);
}
.product-label {
font-size: 9px; letter-spacing: 0.35em;
text-transform: uppercase; color: var(--gold);
}
.product-name {
font-family: 'Cormorant Garamond', serif;
font-size: 32px; font-weight: 300;
line-height: 1.2; margin: 12px 0 8px;
}
.product-tagline {
font-size: 12px; color: var(--muted);
line-height: 1.7; margin-bottom: 28px;
}
.product-ingredients {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 28px;
}
.ing-pill {
border: 1px solid var(--border);
padding: 4px 12px;
font-size: 10px; letter-spacing: 0.1em;
color: var(--gold-light); border-radius: 0;
}
.product-benefits {
list-style: none; margin-bottom: 32px;
}
.product-benefits li {
font-size: 12px; color: var(--muted);
padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
display: flex; align-items: center; gap: 10px;
}
.product-benefits li::before {
content: '→'; color: var(--gold); font-size: 12px;
}
.amazon-btn {
display: flex; align-items: center; gap: 12px;
background: var(--gold);
color: var(--black);
padding: 14px 28px;
text-decoration: none;
font-size: 11px; letter-spacing: 0.15em;
text-transform: uppercase; font-weight: 700;
transition: all 0.3s ease;
position: relative; overflow: hidden;
}
.amazon-btn::before {
content: '';
position: absolute; inset: 0;
background: rgba(255,255,255,0.1);
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.amazon-btn:hover::before { transform: translateX(0); }
.amazon-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,169,110,0.3); }
.amazon-btn svg { flex-shrink: 0; }
.product-size {
font-size: 10px; color: var(--muted);
letter-spacing: 0.1em; margin-top: 12px;
}
.product-badge-row {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.badge {
font-size: 9px; letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid var(--border);
color: var(--muted);
}
.badge.highlight { border-color: var(--gold); color: var(--gold); }
/* ── SKIN CONCERN QUIZ ── */
#quiz { background: var(--black); }
.quiz-container {
max-width: 800px; margin: 0 auto;
position: relative;
}
.quiz-progress-bar {
height: 2px; background: rgba(255,255,255,0.08);
margin-bottom: 60px; border-radius: 2px; overflow: hidden;
}
.quiz-progress-fill {
height: 100%; background: var(--gold);
transition: width 0.5s ease;
border-radius: 2px;
}
.quiz-step { display: none; animation: fadeUp 0.5s ease; }
.quiz-step.active { display: block; }
.quiz-q {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(24px, 3vw, 40px); font-weight: 300;
text-align: center; margin-bottom: 12px;
}
.quiz-hint { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 48px; }
.quiz-options {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.quiz-option {
border: 1px solid var(--border);
padding: 20px 24px;
cursor: pointer;
transition: all 0.3s ease;
display: flex; align-items: flex-start; gap: 16px;
background: transparent;
color: var(--white); text-align: left;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
}
.quiz-option:hover, .quiz-option.selected {
border-color: var(--gold);
background: var(--glow);
color: var(--gold);
}
.quiz-option-icon { font-size: 24px; flex-shrink: 0; }
.quiz-option-text strong { display: block; font-size: 14px; margin-bottom: 4px; }
.quiz-option-text span { font-size: 12px; color: var(--muted); }
.quiz-option.selected .quiz-option-text span { color: rgba(201,169,110,0.6); }
.quiz-nav {
display: flex; justify-content: space-between; align-items: center;
margin-top: 48px;
}
.quiz-btn {
background: var(--gold); color: var(--black);
border: none; padding: 14px 40px;
font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase; cursor: pointer;
font-weight: 700; font-family: 'DM Sans', sans-serif;
transition: all 0.3s;
}
.quiz-btn:hover { background: var(--gold-light); transform: translateY(-2px); }
.quiz-btn-back {
background: transparent; color: var(--muted);
border: 1px solid var(--border);
padding: 14px 28px;
font-size: 11px; letter-spacing: 0.1em;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: all 0.3s;
}
.quiz-btn-back:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
.quiz-step-num {
font-size: 11px; color: var(--muted); letter-spacing: 0.1em;
}
/* QUIZ RESULT */
.quiz-result { text-align: center; }
.quiz-result-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 14px; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 16px;
}
.quiz-result-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 4vw, 52px); font-weight: 300;
margin-bottom: 24px;
}
.quiz-result-desc {
font-size: 15px; color: var(--muted); line-height: 1.8;
max-width: 560px; margin: 0 auto 48px;
}
.quiz-result-products {
display: flex; gap: 20px; justify-content: center;
flex-wrap: wrap; margin-bottom: 40px;
}
.quiz-rec-card {
border: 1px solid var(--border);
padding: 24px 28px; max-width: 280px;
text-align: left;
transition: all 0.3s;
}
.quiz-rec-card:hover { border-color: var(--gold); }
.quiz-rec-label { font-size: 9px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
.quiz-rec-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; margin-bottom: 8px; }
.quiz-rec-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.quiz-restart {
background: transparent; color: var(--muted);
border: none; cursor: pointer;
font-size: 12px; letter-spacing: 0.1em;
font-family: 'DM Sans', sans-serif;
transition: color 0.3s;
}
.quiz-restart:hover { color: var(--gold); }
/* ── SCIENCE SECTION ── */
#science { background: var(--charcoal); }
.science-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 2px; max-width: 1300px; margin: 0 auto;
}
.science-card {
background: var(--black);
padding: 56px 48px;
position: relative; overflow: hidden;
transition: all 0.4s ease;
}
.science-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0; transition: opacity 0.4s;
}
.science-card:hover::before { opacity: 1; }
.science-card:hover { background: #0f0e0c; }
.science-num {
font-family: 'Cormorant Garamond', serif;
font-size: 80px; font-weight: 300;
color: rgba(201,169,110,0.08);
position: absolute; top: 20px; right: 24px;
line-height: 1;
}
.science-icon {
width: 48px; height: 48px;
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
margin-bottom: 28px; font-size: 20px;
transition: all 0.3s;
}
.science-card:hover .science-icon { border-color: var(--gold); }
.science-label {
font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--gold); margin-bottom: 12px;
}
.science-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 26px; font-weight: 400;
margin-bottom: 16px;
}
.science-card-text {
font-size: 13px; color: var(--muted); line-height: 1.8;
}
/* ── INGREDIENTS DEEP DIVE ── */
#ingredients { background: var(--black); }
.ing-showcase {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 100px;
align-items: center;
}
.ing-visual {
position: relative; display: flex;
flex-direction: column; gap: 16px;
}
.ing-item {
display: flex; gap: 20px; align-items: center;
padding: 20px 24px;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.35s ease;
position: relative; overflow: hidden;
}
.ing-item::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 0;
background: var(--glow);
transition: width 0.4s ease;
}
.ing-item:hover, .ing-item.active { border-color: var(--gold); }
.ing-item:hover::after, .ing-item.active::after { width: 100%; }
.ing-pct {
font-family: 'Cormorant Garamond', serif;
font-size: 28px; font-weight: 300;
color: var(--gold); min-width: 60px;
}
.ing-info strong { display: block; font-size: 15px; margin-bottom: 4px; }
.ing-info span { font-size: 12px; color: var(--muted); }
.ing-detail-panel {
border: 1px solid var(--border);
padding: 48px;
position: sticky; top: 100px;
}
.ing-detail-active {
font-family: 'Cormorant Garamond', serif;
font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--gold); margin-bottom: 20px;
}
.ing-detail-name {
font-family: 'Cormorant Garamond', serif;
font-size: 38px; font-weight: 300; margin-bottom: 20px;
}
.ing-detail-desc {
font-size: 14px; color: var(--muted); line-height: 1.9;
margin-bottom: 32px;
}
.ing-benefits-list {
list-style: none; display: flex; flex-direction: column; gap: 12px;
}
.ing-benefits-list li {
font-size: 13px; color: var(--muted);
display: flex; align-items: center; gap: 12px;
padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ing-benefits-list li::before {
content: '✦'; color: var(--gold); font-size: 8px; flex-shrink: 0;
}
/* ── STATS BANNER ── */
#stats {
background: linear-gradient(135deg, #110e05 0%, var(--black) 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 80px 60px;
}
.stats-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px; max-width: 900px; margin: 0 auto;
}
.stat-block {
text-align: center; padding: 48px 32px;
border: 1px solid var(--border);
background: rgba(10,10,10,0.5);
transition: all 0.4s;
}
.stat-block:hover { border-color: var(--gold); background: var(--glow); }
.stat-big {
font-family: 'Cormorant Garamond', serif;
font-size: 72px; font-weight: 300;
color: var(--gold); line-height: 1; display: block;
}
.stat-agree {
font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
color: var(--muted); display: block; margin: 4px 0 12px;
}
.stat-desc {
font-size: 12px; color: var(--muted); line-height: 1.6;
letter-spacing: 0.05em; text-transform: uppercase;
}
/* ── HOW TO USE ── */
#howto { background: var(--charcoal); }
.howto-steps {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 2px; max-width: 1200px; margin: 0 auto;
}
.step-card {
background: var(--black);
padding: 48px 32px;
text-align: center;
position: relative;
transition: all 0.4s;
}
.step-card:hover { background: #0f0e0c; transform: translateY(-4px); }
.step-num {
font-family: 'Cormorant Garamond', serif;
font-size: 60px; font-weight: 300;
color: rgba(201,169,110,0.15); margin-bottom: 20px;
display: block;
}
.step-icon-wrap {
width: 64px; height: 64px;
border: 1px solid var(--border);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px; margin: 0 auto 24px;
transition: all 0.3s;
}
.step-card:hover .step-icon-wrap { border-color: var(--gold); }
.step-name {
font-family: 'Cormorant Garamond', serif;
font-size: 22px; margin-bottom: 12px;
}
.step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }
.step-highlight { color: var(--gold); font-weight: 600; }
.step-connector {
position: absolute; right: -1px; top: 50%;
transform: translateY(-50%);
font-size: 20px; color: var(--gold);
opacity: 0.4; z-index: 2;
display: none;
}
/* ── CERTIFICATIONS ── */
#certifications { background: var(--black); }
.certs-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; max-width: 900px; margin: 0 auto;
}
.cert-card {
border: 1px solid var(--border);
padding: 32px 24px; text-align: center;
transition: all 0.35s;
}
.cert-card:hover { border-color: var(--gold); background: var(--glow); }
.cert-icon { font-size: 36px; margin-bottom: 16px; display: block; }
.cert-name {
font-family: 'Cormorant Garamond', serif;
font-size: 18px; margin-bottom: 8px;
}
.cert-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }
/* ── FOUNDER SECTION ── */
#founder { background: var(--charcoal); }
.founder-inner {
max-width: 900px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 2fr;
gap: 80px; align-items: center;
}
.founder-visual {
position: relative;
}
.founder-monogram {
width: 220px; height: 220px;
border: 1px solid var(--border);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(201,169,110,0.05) 0%, transparent 70%);
}
.founder-initial {
font-family: 'Cormorant Garamond', serif;
font-size: 100px; font-weight: 300;
color: var(--gold); line-height: 1;
}
.founder-title-sub {
font-size: 9px; letter-spacing: 0.35em;
text-transform: uppercase; color: var(--muted);
margin-top: 4px;
}
.founder-quote {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(20px, 2.5vw, 30px);
font-style: italic; font-weight: 300;
line-height: 1.5; color: var(--white);
margin-bottom: 32px;
}
.founder-bio {
font-size: 14px; color: var(--muted); line-height: 1.9;
margin-bottom: 28px;
}
.founder-sig {
font-family: 'Cormorant Garamond', serif;
font-size: 28px; font-style: italic;
color: var(--gold); display: block;
}
.founder-role {
font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--muted);
margin-top: 4px;
}
/* ── FOOTER ── */
footer {
background: var(--charcoal);
border-top: 1px solid var(--border);
padding: 80px 60px 40px;
}
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; margin-bottom: 60px;
}
.footer-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 28px; font-weight: 300;
letter-spacing: 0.2em; margin-bottom: 20px;
display: block;
}
.footer-tagline { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.footer-heading {
font-size: 9px; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 20px; display: block;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
font-size: 13px; color: var(--muted);
text-decoration: none; transition: color 0.3s;
}
.footer-links a:hover { color: var(--gold); }
.footer-bottom {
display: flex; align-items: center; justify-content: space-between;
padding-top: 32px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
}
.footer-bottom a { color: var(--gold); text-decoration: none; }
.amazon-flags { display: flex; gap: 16px; align-items: center; }
.flag-link {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--muted);
text-decoration: none; letter-spacing: 0.1em;
border: 1px solid var(--border);
padding: 8px 16px; transition: all 0.3s;
}
.flag-link:hover { border-color: var(--gold); color: var(--gold); }
/* ── STICKY CTA BAR ── */
.sticky-cta {
position: fixed; bottom: 24px; right: 24px; z-index: 50;
display: flex; flex-direction: column; gap: 12px;
opacity: 0; transform: translateY(20px);
transition: all 0.4s ease;
}
.sticky-cta.visible { opacity: 1; transform: translateY(0); }
.sticky-btn {
background: var(--gold); color: var(--black);
padding: 12px 20px;
font-size: 10px; letter-spacing: 0.15em;
text-transform: uppercase; font-weight: 700;
text-decoration: none;
display: flex; align-items: center; gap: 8px;
box-shadow: 0 8px 32px rgba(201,169,110,0.4);
transition: all 0.3s;
white-space: nowrap;
}
.sticky-btn:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,169,110,0.5); }
/* ── SCROLL REVEAL ── */
.reveal {
opacity: 0; transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* ── MOBILE NAV OVERLAY ── */
.mobile-nav {
position: fixed; inset: 0; z-index: 200;
background: var(--black);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 32px;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(.77,0,.175,1);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
font-family: 'Cormorant Garamond', serif;
font-size: 36px; font-weight: 300;
color: var(--white); text-decoration: none;
letter-spacing: 0.1em;
transition: color 0.3s;
}
.mobile-nav a:hover { color: var(--gold); }
.mobile-close {
position: absolute; top: 28px; right: 32px;
font-size: 28px; color: var(--muted);
cursor: pointer; background: none; border: none;
transition: color 0.3s;
}
.mobile-close:hover { color: var(--gold); }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
nav { padding: 20px 32px; }
nav.scrolled { padding: 14px 32px; }
section { padding: 80px 32px; }
.hero-grid { grid-template-columns: 1fr; gap: 60px; padding: 0 32px; padding-top: 120px; text-align: center; }
.hero-subtitle { margin-inline: auto; }
.hero-btns { justify-content: center; }
.hero-stats { justify-content: center; }
.hero-visual { max-width: 400px; margin: 0 auto; }
.hero-badge { bottom: -16px; right: -16px; width: 80px; height: 80px; }
.hero-badge-text { font-size: 9px; }
.products-grid { grid-template-columns: 1fr; }
.product-card-inner { grid-template-columns: 1fr; min-height: auto; }
.product-img-side { min-height: 300px; }
.product-info-side { border-left: none; border-top: 1px solid var(--border); }
.science-grid { grid-template-columns: 1fr; }
.ing-showcase { grid-template-columns: 1fr; gap: 60px; }
.ing-detail-panel { position: static; }
.stats-grid { grid-template-columns: 1fr; }
.howto-steps { grid-template-columns: repeat(2, 1fr); }
.certs-grid { grid-template-columns: repeat(2, 1fr); }
.founder-inner { grid-template-columns: 1fr; text-align: center; }
.founder-monogram { margin: 0 auto; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
.quiz-options { grid-template-columns: 1fr; }
.nav-links { display: none; }
.hamburger { display: flex; }
body { cursor: auto; }
.cursor, .cursor-ring { display: none; }
}
@media (max-width: 640px) {
nav { padding: 16px 20px; }
nav.scrolled { padding: 12px 20px; }
section { padding: 60px 20px; }
.hero-grid { padding: 0 20px; padding-top: 100px; gap: 40px; }
.hero-title { font-size: clamp(40px, 10vw, 64px); }
.howto-steps { grid-template-columns: 1fr; }
.certs-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero-stats { flex-direction: column; gap: 24px; align-items: center; }
.products-grid { gap: 0; }
.sticky-cta { bottom: 16px; right: 16px; }
.sticky-btn { padding: 10px 16px; font-size: 9px; }
footer { padding: 60px 20px 32px; }
.ing-showcase { gap: 40px; }
.quiz-result-products { flex-direction: column; align-items: center; }
}
/* ── LOADING ANIMATION ── */
.page-loader {
position: fixed; inset: 0; z-index: 1000;
background: var(--black);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 32px; font-weight: 300;
letter-spacing: 0.5em; color: var(--white);
animation: pulse 1.5s ease infinite;
}
.loader-bar-wrap {
width: 200px; height: 1px;
background: rgba(255,255,255,0.1);
margin-top: 32px; overflow: hidden;
}
.loader-bar {
height: 100%; background: var(--gold);
animation: load 1.8s ease forwards;
}
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes load { from { width: 0; } to { width: 100%; } }
</style>
</head>
<body>
<!-- PAGE LOADER -->
<div class="page-loader" id="loader">
<div class="loader-logo">VERSES</div>
<div class="loader-bar-wrap"><div class="loader-bar"></div></div>
</div>
<!-- CUSTOM CURSOR -->
<div class="cursor" id="cursor"></div>
<div class="cursor-ring" id="cursorRing"></div>
<!-- MOBILE NAV -->
<div class="mobile-nav" id="mobileNav">
<button class="mobile-close" id="mobileClose">✕</button>
<a href="#products" onclick="closeMobileNav()">Products</a>
<a href="#quiz" onclick="closeMobileNav()">Skin Quiz</a>
<a href="#science" onclick="closeMobileNav()">Science</a>
<a href="#ingredients" onclick="closeMobileNav()">Ingredients</a>
<a href="#founder" onclick="closeMobileNav()">Our Story</a>
</div>
<!-- NAVBAR -->
<nav id="navbar">
<a href="#" class="nav-logo">VER<span>S</span>ES</a>
<ul class="nav-links">
<li><a href="#products">Products</a></li>
<li><a href="#quiz">Skin Quiz</a></li>
<li><a href="#science">Science</a></li>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#founder">Our Story</a></li>
<li><a href="https://www.amazon.in/stores/VERSES/page/4F3B7E1A-CE8A-4F7B-88A0-17F14EBCE2BD" target="_blank" class="nav-cta">Shop Now</a></li>
</ul>
<button class="hamburger" id="hamburger">
<span></span><span></span><span></span>
</button>
</nav>
<!-- HERO -->
<section id="hero">
<div class="hero-particles" id="particles"></div>
<div class="hero-grid">
<div class="hero-content">
<div class="hero-tag">Halal Certified · Clinically Tested · Vegan</div>
<h1 class="hero-title">
Science Meets<br>
<em>Pure</em> Luxury
</h1>
<p class="hero-subtitle">
Verses Skin fuses dermatologist-approved actives with halal-certified purity — crafted for women who demand both results and integrity in every drop.
</p>
<div class="hero-btns">
<a href="#products" class="btn-primary">Explore Collection</a>
<a href="#quiz" class="btn-outline">Find Your Ritual →</a>
</div>
<div class="hero-stats">
<div>
<span class="stat-num">100%</span>
<span class="stat-label">Halal Certified</span>
</div>
<div>
<span class="stat-num">96%</span>
<span class="stat-label">Reported Brighter Skin</span>
</div>
<div>
<span class="stat-num">0%</span>
<span class="stat-label">Compromise on Ethics</span>
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-img-wrap">
<img src="https://m.media-amazon.com/images/I/71Q6w+VjN7L._SL1500_.jpg" alt="Verses Vitamin C Serum" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22500%22 height=%22600%22 viewBox=%220 0 500 600%22><rect fill=%22%230f0f0f%22 width=%22500%22 height=%22600%22/><text x=%2250%%25%22 y=%2250%%25%22 text-anchor=%22middle%22 fill=%22%23c9a96e%22 font-size=%2224%22 font-family=%22serif%22>VERSES SKIN</text></svg>'">
</div>
<div class="hero-badge">
<div class="hero-badge-text">In the<br>Name<br>of Glow</div>
</div>
</div>
</div>
</section>
<!-- MARQUEE -->
<div class="marquee-strip">
<div class="marquee-track" id="marqueeTrack">
<span class="marquee-item">Halal Certified</span>
<span class="marquee-item">Cruelty Free</span>
<span class="marquee-item">Clinically Tested</span>
<span class="marquee-item">Vegan Formula</span>
<span class="marquee-item">FDA Approved</span>
<span class="marquee-item">Paraben Free</span>
<span class="marquee-item">Sulfate Free</span>
<span class="marquee-item">Premium Quality</span>
<span class="marquee-item">Science Backed</span>
<span class="marquee-item">Halal Certified</span>
<span class="marquee-item">Cruelty Free</span>
<span class="marquee-item">Clinically Tested</span>
<span class="marquee-item">Vegan Formula</span>
<span class="marquee-item">FDA Approved</span>
<span class="marquee-item">Paraben Free</span>
<span class="marquee-item">Sulfate Free</span>
<span class="marquee-item">Premium Quality</span>
<span class="marquee-item">Science Backed</span>
</div>
</div>
<!-- PRODUCTS -->
<section id="products">
<div class="section-header reveal">
<span class="section-tag">The Collection</span>
<h2 class="section-title">Formulated to <em>Transform</em></h2>
<div class="divider"></div>
<p class="section-sub">Every product in the Verses Skin collection is built on clinical science, halal integrity, and an uncompromising commitment to visible results.</p>
</div>
<div class="products-grid">
<!-- SERUM -->
<div class="product-card reveal">
<div class="product-card-inner">
<div class="product-img-side">
<div class="product-img-glow"></div>
<img src="https://m.media-amazon.com/images/I/71Q6w+VjN7L._SL1500_.jpg"
alt="Verses Vitamin C Serum"
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22400%22><rect fill=%22%23111%22 width=%22300%22 height=%22400%22/><text x=%2250%%25%22 y=%2250%%25%22 text-anchor=%22middle%22 fill=%22%23c9a96e%22 font-family=%22serif%22 font-size=%2218%22>SERUM</text></svg>'">
</div>
<div class="product-info-side">
<div>
<div class="product-badge-row">
<span class="badge highlight">Bestseller</span>
<span class="badge">30ml · 1.01oz</span>
<span class="badge">Halal</span>
</div>
<div class="product-label">Brightening Formula</div>
<h3 class="product-name">Vitamin C<br>Radiance Serum</h3>
<p class="product-tagline">Advanced brightening serum with AA2G — the most stable form of Vitamin C — combined with Niacinamide, Moroccan Argan Oil and Hyaluronic Acid for visibly glowing, even-toned skin.</p>
<div class="product-ingredients">
<span class="ing-pill">2% AA2G Vitamin C</span>
<span class="ing-pill">2% Niacinamide</span>
<span class="ing-pill">2% Hyaluronic Acid</span>
<span class="ing-pill">1% Moroccan Argan Oil</span>
</div>
<ul class="product-benefits">
<li>Fades dark spots & hyperpigmentation</li>
<li>Boosts collagen production</li>
<li>Deeply hydrates & plumps skin</li>
<li>Suitable for all skin types</li>
<li>Cruelty-free · Vegan · Halal</li>
</ul>
</div>
<div>
<a href="https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis"
target="_blank" class="amazon-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.093.48-.255.19-.59.41-1.006.654-1.302.77-2.697 1.36-4.18 1.77a18.5 18.5 0 01-4.57.58c-4.143 0-7.963-1.157-11.16-3.386a.746.746 0 01-.173-.152.43.43 0 01.104-.358zm13.21-8.023c0-1.39.37-2.47 1.1-3.24.74-.77 1.73-1.16 2.98-1.16 1.14 0 2.04.36 2.7 1.08.65.71.98 1.65.98 2.8 0 .66-.1 1.27-.3 1.82-.22.57-.52 1.06-.92 1.46-.38.4-.84.72-1.37.95-.52.23-1.1.35-1.73.35-1.16 0-2.09-.37-2.77-1.1-.69-.74-1.03-1.7-1.03-2.9h1.44c0 .95.2 1.67.6 2.14.4.47.98.7 1.74.7.73 0 1.3-.24 1.69-.73.4-.48.6-1.16.6-2.01 0-.8-.19-1.44-.55-1.92-.36-.48-.86-.72-1.5-.72-.57 0-1.04.18-1.41.52-.36.35-.6.86-.7 1.54H13.9zm-8.5 9.83c-.5-.5-.76-1.17-.76-2.01 0-.6.14-1.14.43-1.62.3-.47.7-.84 1.22-1.1.53-.27 1.12-.4 1.79-.4.47 0 .94.06 1.43.17v-.6c0-.59-.13-1.01-.4-1.27-.28-.26-.72-.39-1.35-.39-.35 0-.7.06-1.07.18-.37.12-.76.3-1.2.53l-.56-1.17c.54-.3 1.07-.52 1.6-.66.52-.14 1.06-.21 1.62-.21.98 0 1.73.24 2.25.72.52.49.78 1.19.78 2.1v4.68h-1.34l-.12-.92c-.3.34-.66.6-1.08.78-.42.18-.87.27-1.37.27-.72 0-1.32-.25-1.82-.73l.04-.07zm2.04-.47c.35 0 .68-.08.97-.24.3-.16.54-.38.74-.66v-1.3a5.9 5.9 0 00-1.29-.15c-.48 0-.87.12-1.17.35-.3.23-.45.54-.45.92 0 .36.11.64.33.86.22.2.51.32.87.32v-.1z"/></svg>
Buy on Amazon India
</a>
<p class="product-size">Also available on <a href="https://www.amazon.ae" target="_blank" style="color:var(--gold);text-decoration:none;">Amazon UAE →</a></p>
</div>
</div>
</div>
</div>
<!-- FACEWASH -->
<div class="product-card reveal reveal-delay-2">
<div class="product-card-inner">
<div class="product-img-side">
<div class="product-img-glow"></div>
<img src="https://m.media-amazon.com/images/I/71EQ8Y8IkSL._SL1500_.jpg"
alt="Verses Salicylic Facewash"
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22400%22><rect fill=%22%23111%22 width=%22300%22 height=%22400%22/><text x=%2250%%25%22 y=%2250%%25%22 text-anchor=%22middle%22 fill=%22%23c9a96e%22 font-family=%22serif%22 font-size=%2218%22>FACEWASH</text></svg>'">
</div>
<div class="product-info-side">
<div>
<div class="product-badge-row">
<span class="badge highlight">New · Formula 2025</span>
<span class="badge">150ml</span>
<span class="badge">Halal</span>
</div>
<div class="product-label">Acne Control System</div>
<h3 class="product-name">Salicylic Silk<br>Foaming Facewash</h3>
<p class="product-tagline">Advanced BHA + HA Complex delivering visible acne reduction and oil control within 7 days. Deep pore cleansing with a luxurious silky foam — effective yet never stripping.</p>
<div class="product-ingredients">
<span class="ing-pill">BHA Salicylic Acid</span>
<span class="ing-pill">Hyaluronic Acid</span>
<span class="ing-pill">Foaming Complex</span>
</div>
<ul class="product-benefits">
<li>Visible acne reduction in 7 days</li>
<li>Controls excess oil & shine</li>
<li>Deep pore cleansing action</li>
<li>Hydrating — never over-drying</li>
<li>Toxin Free · Vegan · Halal</li>
</ul>
</div>
<div>
<a href="https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis"
target="_blank" class="amazon-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.093.48-.255.19-.59.41-1.006.654-1.302.77-2.697 1.36-4.18 1.77a18.5 18.5 0 01-4.57.58c-4.143 0-7.963-1.157-11.16-3.386a.746.746 0 01-.173-.152.43.43 0 01.104-.358zm13.21-8.023c0-1.39.37-2.47 1.1-3.24.74-.77 1.73-1.16 2.98-1.16 1.14 0 2.04.36 2.7 1.08.65.71.98 1.65.98 2.8 0 .66-.1 1.27-.3 1.82-.22.57-.52 1.06-.92 1.46-.38.4-.84.72-1.37.95-.52.23-1.1.35-1.73.35-1.16 0-2.09-.37-2.77-1.1-.69-.74-1.03-1.7-1.03-2.9h1.44c0 .95.2 1.67.6 2.14.4.47.98.7 1.74.7.73 0 1.3-.24 1.69-.73.4-.48.6-1.16.6-2.01 0-.8-.19-1.44-.55-1.92-.36-.48-.86-.72-1.5-.72-.57 0-1.04.18-1.41.52-.36.35-.6.86-.7 1.54H13.9zm-8.5 9.83c-.5-.5-.76-1.17-.76-2.01 0-.6.14-1.14.43-1.62.3-.47.7-.84 1.22-1.1.53-.27 1.12-.4 1.79-.4.47 0 .94.06 1.43.17v-.6c0-.59-.13-1.01-.4-1.27-.28-.26-.72-.39-1.35-.39-.35 0-.7.06-1.07.18-.37.12-.76.3-1.2.53l-.56-1.17c.54-.3 1.07-.52 1.6-.66.52-.14 1.06-.21 1.62-.21.98 0 1.73.24 2.25.72.52.49.78 1.19.78 2.1v4.68h-1.34l-.12-.92c-.3.34-.66.6-1.08.78-.42.18-.87.27-1.37.27-.72 0-1.32-.25-1.82-.73l.04-.07zm2.04-.47c.35 0 .68-.08.97-.24.3-.16.54-.38.74-.66v-1.3a5.9 5.9 0 00-1.29-.15c-.48 0-.87.12-1.17.35-.3.23-.45.54-.45.92 0 .36.11.64.33.86.22.2.51.32.87.32v-.1z"/></svg>
Buy on Amazon India
</a>
<p class="product-size">Also available on <a href="https://www.amazon.ae" target="_blank" style="color:var(--gold);text-decoration:none;">Amazon UAE →</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKIN QUIZ -->
<section id="quiz">
<div class="section-header reveal">
<span class="section-tag">Personalised Ritual</span>
<h2 class="section-title">Find Your <em>Perfect</em> Match</h2>
<div class="divider"></div>
<p class="section-sub">Answer 4 quick questions and we'll recommend your ideal Verses Skin routine.</p>
</div>
<div class="quiz-container reveal">
<div class="quiz-progress-bar">
<div class="quiz-progress-fill" id="quizProgress" style="width:0%"></div>
</div>
<!-- Step 1 -->
<div class="quiz-step active" data-step="1">
<h3 class="quiz-q">What's your primary skin concern?</h3>
<p class="quiz-hint">Select the one that bothers you most</p>
<div class="quiz-options">
<button class="quiz-option" data-value="dark-spots" onclick="selectOption(this)">
<span class="quiz-option-icon">🎯</span>
<span class="quiz-option-text">
<strong>Dark Spots & Pigmentation</strong>
<span>Uneven skin tone, melasma, post-acne marks</span>
</span>
</button>
<button class="quiz-option" data-value="acne" onclick="selectOption(this)">
<span class="quiz-option-icon">💧</span>
<span class="quiz-option-text">
<strong>Acne & Breakouts</strong>
<span>Active acne, blackheads, excess oil</span>
</span>
</button>
<button class="quiz-option" data-value="dullness" onclick="selectOption(this)">
<span class="quiz-option-icon">✨</span>
<span class="quiz-option-text">
<strong>Dullness & Lack of Glow</strong>
<span>Tired-looking, lackluster, unradiant skin</span>
</span>
</button>
<button class="quiz-option" data-value="aging" onclick="selectOption(this)">
<span class="quiz-option-icon">🕐</span>
<span class="quiz-option-text">
<strong>Fine Lines & Aging Signs</strong>
<span>Loss of firmness, wrinkles, dehydration</span>
</span>
</button>
</div>
<div class="quiz-nav">
<div></div>
<button class="quiz-btn" onclick="nextStep(1)">Next →</button>
<span class="quiz-step-num">1 of 4</span>
</div>
</div>
<!-- Step 2 -->
<div class="quiz-step" data-step="2">
<h3 class="quiz-q">How would you describe your skin type?</h3>
<p class="quiz-hint">This helps us find the right texture for you</p>
<div class="quiz-options">
<button class="quiz-option" data-value="oily" onclick="selectOption(this)">
<span class="quiz-option-icon">💦</span>
<span class="quiz-option-text">
<strong>Oily</strong>
<span>Shiny T-zone, enlarged pores, frequent breakouts</span>
</span>
</button>
<button class="quiz-option" data-value="dry" onclick="selectOption(this)">
<span class="quiz-option-icon">🌵</span>
<span class="quiz-option-text">
<strong>Dry</strong>
<span>Tight feeling, flakiness, rough patches</span>
</span>
</button>
<button class="quiz-option" data-value="combination" onclick="selectOption(this)">
<span class="quiz-option-icon">☯️</span>
<span class="quiz-option-text">
<strong>Combination</strong>
<span>Oily center, dry cheeks, mixed zones</span>
</span>
</button>
<button class="quiz-option" data-value="sensitive" onclick="selectOption(this)">
<span class="quiz-option-icon">🌸</span>
<span class="quiz-option-text">
<strong>Sensitive</strong>
<span>Reacts easily, redness, thin skin</span>
</span>
</button>
</div>
<div class="quiz-nav">
<button class="quiz-btn-back" onclick="prevStep(2)">← Back</button>
<button class="quiz-btn" onclick="nextStep(2)">Next →</button>
<span class="quiz-step-num">2 of 4</span>
</div>
</div>
<!-- Step 3 -->
<div class="quiz-step" data-step="3">
<h3 class="quiz-q">When does your skin feel at its worst?</h3>
<p class="quiz-hint">Think about your typical day</p>
<div class="quiz-options">
<button class="quiz-option" data-value="morning" onclick="selectOption(this)">
<span class="quiz-option-icon">🌅</span>
<span class="quiz-option-text">
<strong>Morning</strong>
<span>Wakes up oily or puffy</span>
</span>
</button>
<button class="quiz-option" data-value="afternoon" onclick="selectOption(this)">
<span class="quiz-option-icon">☀️</span>
<span class="quiz-option-text">
<strong>Afternoon</strong>
<span>Gets dull after hours of sun & pollution</span>
</span>
</button>
<button class="quiz-option" data-value="evening" onclick="selectOption(this)">
<span class="quiz-option-icon">🌙</span>
<span class="quiz-option-text">
<strong>Evening</strong>
<span>Feels dehydrated & stressed after the day</span>
</span>
</button>
<button class="quiz-option" data-value="always" onclick="selectOption(this)">
<span class="quiz-option-icon">🔄</span>
<span class="quiz-option-text">
<strong>All Day</strong>
<span>Constant struggle throughout the day</span>
</span>
</button>
</div>
<div class="quiz-nav">
<button class="quiz-btn-back" onclick="prevStep(3)">← Back</button>
<button class="quiz-btn" onclick="nextStep(3)">Next →</button>
<span class="quiz-step-num">3 of 4</span>
</div>
</div>
<!-- Step 4 -->
<div class="quiz-step" data-step="4">
<h3 class="quiz-q">What's your skincare experience level?</h3>
<p class="quiz-hint">We'll keep your routine as simple or detailed as you like</p>
<div class="quiz-options">
<button class="quiz-option" data-value="beginner" onclick="selectOption(this)">
<span class="quiz-option-icon">🌱</span>
<span class="quiz-option-text">
<strong>Beginner</strong>
<span>Just starting out, want simple steps</span>
</span>
</button>
<button class="quiz-option" data-value="intermediate" onclick="selectOption(this)">
<span class="quiz-option-icon">🌿</span>
<span class="quiz-option-text">
<strong>Intermediate</strong>
<span>Have a routine, want to level up</span>
</span>
</button>
<button class="quiz-option" data-value="advanced" onclick="selectOption(this)">
<span class="quiz-option-icon">🔬</span>
<span class="quiz-option-text">
<strong>Advanced</strong>
<span>Love actives, layering, and multi-step routines</span>
</span>
</button>
<button class="quiz-option" data-value="minimal" onclick="selectOption(this)">
<span class="quiz-option-icon">⚡</span>
<span class="quiz-option-text">
<strong>Minimalist</strong>
<span>Want maximum results in minimum steps</span>
</span>
</button>
</div>
<div class="quiz-nav">
<button class="quiz-btn-back" onclick="prevStep(4)">← Back</button>
<button class="quiz-btn" onclick="showResult()">See My Results →</button>
<span class="quiz-step-num">4 of 4</span>
</div>
</div>
<!-- Result -->
<div class="quiz-step" data-step="result">
<div class="quiz-result">
<div class="quiz-result-heading">Your Personalised Ritual</div>
<h3 class="quiz-result-title" id="resultTitle">Your Perfect Routine</h3>
<p class="quiz-result-desc" id="resultDesc">Loading your recommendation...</p>
<div class="quiz-result-products" id="resultProducts"></div>
<button class="quiz-restart" onclick="restartQuiz()">↩ Retake Quiz</button>
</div>
</div>
</div>
</section>
<!-- SCIENCE -->
<section id="science">
<div class="section-header reveal">
<span class="section-tag">Research & Development</span>
<h2 class="section-title">The <em>Science</em> of Glow</h2>
<div class="divider"></div>
<p class="section-sub">Every formula is developed in ISO & GMP-certified labs, rigorously tested for Indian skin types and climates.</p>
</div>
<div class="science-grid">
<div class="science-card reveal">
<div class="science-num">01</div>
<div class="science-icon">🧬</div>
<div class="science-label">Active Formulation</div>
<h3 class="science-card-title">Clinically Proven Actives</h3>
<p class="science-card-text">We use AA2G — the most stable, non-irritating form of Vitamin C — that converts to pure ascorbic acid inside skin cells, delivering brightening at the cellular level without oxidation or irritation.</p>
</div>
<div class="science-card reveal reveal-delay-1">
<div class="science-num">02</div>
<div class="science-icon">🌿</div>
<div class="science-label">Halal Integrity</div>
<h3 class="science-card-title">100% Halal Certified</h3>
<p class="science-card-text">Every ingredient and process is verified free from alcohol, animal derivatives, and prohibited substances. Our halal certification ensures the formula meets global Islamic compliance standards — a promise of purity you can trust.</p>
</div>
<div class="science-card reveal reveal-delay-2">
<div class="science-num">03</div>
<div class="science-icon">🔬</div>
<div class="science-label">Dermatological Testing</div>
<h3 class="science-card-title">Tested for Indian Skin</h3>
<p class="science-card-text">Verses formulas are rigorously dermatologically tested, specifically calibrated for Indian skin tones and South Asian climate conditions — addressing pigmentation, humidity-induced acne, and UV-triggered damage at the source.</p>
</div>
<div class="science-card reveal reveal-delay-3">
<div class="science-num">04</div>
<div class="science-icon">♻️</div>
<div class="science-label">Sustainable Innovation</div>
<h3 class="science-card-title">Ethical & Eco-Conscious</h3>
<p class="science-card-text">From cruelty-free development to eco-conscious packaging, sustainability is embedded in every decision. We believe luxury skincare should never come at the cost of the planet or its creatures.</p>
</div>
</div>
</section>
<!-- INGREDIENTS -->
<section id="ingredients">
<div class="section-header reveal">
<span class="section-tag">Ingredient Intelligence</span>
<h2 class="section-title">What's <em>Inside</em> Matters</h2>
<div class="divider"></div>
<p class="section-sub">Tap each ingredient to understand the science behind your glow.</p>
</div>
<div class="ing-showcase">
<div class="ing-visual reveal">
<div class="ing-item active" onclick="showIngredient('vitc')">
<div class="ing-pct">2%</div>
<div class="ing-info">
<strong>AA2G Vitamin C</strong>
<span>Stable brightening active · Collagen booster</span>
</div>
</div>
<div class="ing-item" onclick="showIngredient('niac')">
<div class="ing-pct">2%</div>
<div class="ing-info">
<strong>Niacinamide (B3)</strong>
<span>Pore minimiser · Oil regulator</span>
</div>
</div>
<div class="ing-item" onclick="showIngredient('ha')">
<div class="ing-pct">2%</div>
<div class="ing-info">
<strong>Hyaluronic Acid</strong>
<span>Deep hydration · Plumping agent</span>
</div>
</div>
<div class="ing-item" onclick="showIngredient('argan')">
<div class="ing-pct">1%</div>
<div class="ing-info">
<strong>Moroccan Argan Oil</strong>
<span>Skin nourishment · Antioxidant shield</span>
</div>
</div>
<div class="ing-item" onclick="showIngredient('bha')">
<div class="ing-pct">—</div>
<div class="ing-info">
<strong>BHA Salicylic Acid</strong>
<span>Pore-clearing · Anti-acne active</span>
</div>
</div>
</div>
<div class="ing-detail-panel reveal reveal-delay-2" id="ingPanel">
<div class="ing-detail-active">Active Ingredient</div>
<h3 class="ing-detail-name" id="ingName">AA2G Vitamin C</h3>
<p class="ing-detail-desc" id="ingDesc">
AA2G (Ascorbyl Glucoside) is the gold standard in Vitamin C stability. Unlike conventional L-ascorbic acid that oxidises rapidly, AA2G converts to pure Vitamin C inside skin cells — delivering maximum potency exactly where it's needed, without irritation or oxidation.
</p>
<ul class="ing-benefits-list" id="ingBenefits">
<li>Inhibits melanin synthesis for spot fading</li>
<li>Stimulates collagen production</li>
<li>Neutralises free radical damage</li>
<li>Stable at all pH levels — no yellowing</li>
<li>Non-irritating for sensitive skin types</li>
</ul>
</div>
</div>
</section>
<!-- STATS -->
<section id="stats">
<div class="section-header reveal">
<span class="section-tag">Clinical Evidence</span>
<h2 class="section-title">Results That <em>Speak</em></h2>
<div class="divider"></div>
<p class="section-sub">Based on user perception study after consistent use.</p>
</div>
<div class="stats-grid">
<div class="stat-block reveal">
<span class="stat-big" data-target="100">0</span>
<span class="stat-agree">% Agree*</span>
<div class="stat-desc">Skin Appears Healthier</div>
</div>
<div class="stat-block reveal reveal-delay-1">
<span class="stat-big" data-target="96">0</span>
<span class="stat-agree">% Agree*</span>
<div class="stat-desc">Brighter & More Radiant</div>
</div>
<div class="stat-block reveal reveal-delay-2">
<span class="stat-big" data-target="90">0</span>
<span class="stat-agree">% Agree*</span>
<div class="stat-desc">Hyperpigmentation Visibly Reduced</div>
</div>
</div>
</section>
<!-- HOW TO USE -->
<section id="howto">
<div class="section-header reveal">
<span class="section-tag">Your Ritual</span>
<h2 class="section-title">How to <em>Apply</em></h2>
<div class="divider"></div>
<p class="section-sub">Layer your products in the correct order for maximum efficacy and absorption.</p>
</div>
<div class="howto-steps">
<div class="step-card reveal">
<span class="step-num">01</span>
<div class="step-icon-wrap">🧼</div>
<div class="step-name">Cleanser</div>
<p class="step-desc">Begin with the <span class="step-highlight">Salicylic Silk Facewash</span>. Lather gently, massage for 60 seconds, rinse thoroughly and pat skin dry.</p>
</div>
<div class="step-card reveal reveal-delay-1">
<span class="step-num">02</span>
<div class="step-icon-wrap">💧</div>
<div class="step-name">Toner</div>
<p class="step-desc">Apply your preferred toner to balance skin pH and prep for better active absorption.</p>
</div>
<div class="step-card reveal reveal-delay-2">
<span class="step-num">03</span>
<div class="step-icon-wrap">✨</div>
<div class="step-name">Serum</div>
<p class="step-desc">Dispense <span class="step-highlight">2–3 drops</span> of Vitamin C Serum. Gently press into face and neck using fingertips. Allow full absorption.</p>
</div>
<div class="step-card reveal reveal-delay-3">
<span class="step-num">04</span>
<div class="step-icon-wrap">🌙</div>
<div class="step-name">Moisturiser</div>
<p class="step-desc">Seal in your serum's actives with a suitable moisturiser to lock in hydration and protect the skin barrier.</p>
</div>
</div>
</section>
<!-- CERTIFICATIONS -->
<section id="certifications">
<div class="section-header reveal">
<span class="section-tag">Our Commitments</span>
<h2 class="section-title">Certified <em>Pure</em></h2>
<div class="divider"></div>
<p class="section-sub">Every claim we make is backed by certification, testing, and unwavering transparency.</p>
</div>
<div class="certs-grid">
<div class="cert-card reveal">
<span class="cert-icon">🐰</span>
<div class="cert-name">Cruelty Free</div>
<p class="cert-desc">Zero animal testing at any stage of development or production.</p>
</div>
<div class="cert-card reveal reveal-delay-1">
<span class="cert-icon">☪️</span>
<div class="cert-name">Halal Certified</div>
<p class="cert-desc">100% free from alcohol, animal derivatives, and prohibited substances.</p>
</div>
<div class="cert-card reveal reveal-delay-2">
<span class="cert-icon">🌿</span>
<div class="cert-name">Vegan</div>
<p class="cert-desc">No animal-derived ingredients — ever. Ethical beauty from the inside out.</p>
</div>
<div class="cert-card reveal">
<span class="cert-icon">🚫</span>
<div class="cert-name">Paraben Free</div>
<p class="cert-desc">Formulated without parabens or endocrine-disrupting preservatives.</p>
</div>
<div class="cert-card reveal reveal-delay-1">
<span class="cert-icon">⚗️</span>
<div class="cert-name">Clinically Tested</div>
<p class="cert-desc">Dermatologically tested in ISO & GMP-certified laboratories.</p>
</div>
<div class="cert-card reveal reveal-delay-2">
<span class="cert-icon">🏛️</span>
<div class="cert-name">FDA Approved</div>
<p class="cert-desc">Manufactured in compliance with FDA standards for safety and quality.</p>
</div>
</div>
</section>
<!-- FOUNDER -->
<section id="founder">
<div class="section-header reveal">
<span class="section-tag">Our Story</span>
<h2 class="section-title">From the <em>Founder</em></h2>
<div class="divider"></div>
</div>
<div class="founder-inner">
<div class="founder-visual reveal">
<div class="founder-monogram">
<div class="founder-initial">M</div>
<div class="founder-title-sub">Founder · CEO</div>
</div>
</div>
<div class="reveal reveal-delay-2">
<p class="founder-quote">"Verses was created with a clear intent: to build skincare that respects both science and skin."</p>
<p class="founder-bio">
In a market crowded with noise and shortcuts, I wanted to establish a brand rooted in formulation integrity, ingredient transparency, and uncompromising quality. Every Verses product is developed with a research-first mindset, combining clinically backed actives with clean, halal-compliant ingredients.
</p>
<p class="founder-bio">
Verses is not built for trends, but for long-term skin health and trust. Our vision is to grow into a globally respected skincare brand that delivers results, consistency, and confidence with every use.
</p>
<span class="founder-sig">Mohammed Kotawala</span>
<span class="founder-role">Founder & CEO, VERSES SKIN</span>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-grid">
<div>
<span class="footer-logo">VERSES</span>
<p class="footer-tagline">Where Science, Purity, and Luxury Meet. Halal-certified skincare crafted for women who demand both real results and ethical integrity.</p>
<div class="amazon-flags">
<a href="https://www.amazon.in/stores/VERSES/page/4F3B7E1A-CE8A-4F7B-88A0-17F14EBCE2BD" target="_blank" class="flag-link">🇮🇳 Amazon India</a>
<a href="https://www.amazon.ae" target="_blank" class="flag-link">🇦🇪 Amazon UAE</a>
</div>
</div>
<div>
<span class="footer-heading">Products</span>
<ul class="footer-links">
<li><a href="https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis" target="_blank">Vitamin C Serum</a></li>
<li><a href="https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis" target="_blank">Salicylic Facewash</a></li>
</ul>
</div>
<div>
<span class="footer-heading">Explore</span>
<ul class="footer-links">
<li><a href="#quiz">Skin Quiz</a></li>
<li><a href="#science">Our Science</a></li>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#founder">About Verses</a></li>
</ul>
</div>
<div>
<span class="footer-heading">Promise</span>
<ul class="footer-links">
<li><a href="#certifications">Halal Certified</a></li>
<li><a href="#certifications">Cruelty Free</a></li>
<li><a href="#certifications">Vegan Formula</a></li>
<li><a href="#certifications">Clinically Tested</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 Verses Skin. All rights reserved. In the Name of Glow.</span>
<span>Made with care by <a href="https://verses.skin" target="_blank">Verses Skin</a></span>
</div>
</footer>
<!-- STICKY CTA -->
<div class="sticky-cta" id="stickyCta">
<a href="https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis"
target="_blank" class="sticky-btn">
✨ Shop Serum on Amazon
</a>
<a href="https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis"
target="_blank" class="sticky-btn" style="background: var(--charcoal); color: var(--gold); border: 1px solid var(--gold); box-shadow: none;">
💧 Shop Facewash on Amazon
</a>
</div>
<script>
// ── LOADER ──
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('loader').classList.add('hidden');
}, 2000);
});
// ── CURSOR ──
const cursor = document.getElementById('cursor');
const cursorRing = document.getElementById('cursorRing');
let mx = 0, my = 0, rx = 0, ry = 0;
document.addEventListener('mousemove', e => {
mx = e.clientX; my = e.clientY;
cursor.style.transform = `translate(${mx - 6}px, ${my - 6}px)`;
});
function animateCursorRing() {
rx += (mx - rx) * 0.12;
ry += (my - ry) * 0.12;
cursorRing.style.transform = `translate(${rx - 20}px, ${ry - 20}px)`;
requestAnimationFrame(animateCursorRing);
}
animateCursorRing();
// ── NAVBAR ──
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 60) navbar.classList.add('scrolled');
else navbar.classList.remove('scrolled');
// Sticky CTA
const stickyCta = document.getElementById('stickyCta');
if (window.scrollY > 400) stickyCta.classList.add('visible');
else stickyCta.classList.remove('visible');
});
// ── HAMBURGER ──
document.getElementById('hamburger').addEventListener('click', () => {
document.getElementById('mobileNav').classList.add('open');
});
document.getElementById('mobileClose').addEventListener('click', closeMobileNav);
function closeMobileNav() {
document.getElementById('mobileNav').classList.remove('open');
}
// ── PARTICLES ──
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 40; i++) {
const p = document.createElement('div');
p.className = 'particle';
p.style.cssText = `
left: ${Math.random() * 100}%;
width: ${Math.random() * 3 + 1}px;
height: ${Math.random() * 3 + 1}px;
animation-duration: ${Math.random() * 12 + 8}s;
animation-delay: ${Math.random() * 10}s;
`;
particlesContainer.appendChild(p);
}
// ── SCROLL REVEAL ──
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.1 });
reveals.forEach(r => observer.observe(r));
// ── COUNTER ANIMATION ──
const counterObserver = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
const el = e.target;
const target = parseInt(el.dataset.target);
let current = 0;
const step = target / 60;
const timer = setInterval(() => {
current = Math.min(current + step, target);
el.textContent = Math.floor(current) + '%';
if (current >= target) clearInterval(timer);
}, 20);
counterObserver.unobserve(el);
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stat-big[data-target]').forEach(el => counterObserver.observe(el));
// ── QUIZ ──
let quizAnswers = {};
let currentStep = 1;
const totalSteps = 4;
function selectOption(btn) {
const step = btn.closest('.quiz-step');
step.querySelectorAll('.quiz-option').forEach(o => o.classList.remove('selected'));
btn.classList.add('selected');
quizAnswers[step.dataset.step] = btn.dataset.value;
}
function updateProgress(step) {
const pct = ((step - 1) / totalSteps) * 100;
document.getElementById('quizProgress').style.width = pct + '%';
}
function nextStep(step) {
if (!quizAnswers[step]) {
const opts = document.querySelector(`[data-step="${step}"] .quiz-option`);
opts.style.borderColor = 'var(--gold)';
setTimeout(() => opts.style.borderColor = '', 800);
return;
}
document.querySelector(`[data-step="${step}"]`).classList.remove('active');
document.querySelector(`[data-step="${step + 1}"]`).classList.add('active');
currentStep = step + 1;
updateProgress(step + 1);
document.getElementById('quiz').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function prevStep(step) {
document.querySelector(`[data-step="${step}"]`).classList.remove('active');
document.querySelector(`[data-step="${step - 1}"]`).classList.add('active');
currentStep = step - 1;
updateProgress(step - 1);
}
function showResult() {
if (!quizAnswers['4']) { nextStep(4); return; }
document.querySelector(`[data-step="4"]`).classList.remove('active');
document.querySelector(`[data-step="result"]`).classList.add('active');
document.getElementById('quizProgress').style.width = '100%';
const concern = quizAnswers['1'];
let title, desc, products;
if (concern === 'acne') {
title = 'The Clarity Ritual';
desc = 'Your skin needs deep pore cleansing and oil regulation. We recommend starting with our Salicylic Silk Facewash to control breakouts, followed by the Vitamin C Serum to fade post-acne marks and even your tone.';
products = [
{ label: 'Step 1 · Cleanse', name: 'Salicylic Silk Facewash', desc: 'BHA + HA Complex — visible acne reduction in 7 days.', link: 'https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis' },
{ label: 'Step 2 · Treat', name: 'Vitamin C Serum', desc: 'Fades post-acne marks and evens skin tone.', link: 'https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis' }
];
} else if (concern === 'dark-spots') {
title = 'The Brightening Ritual';
desc = 'Your skin will benefit most from targeted brightening actives. Our Vitamin C Serum with AA2G directly inhibits melanin synthesis to fade spots and even your complexion — paired with the Facewash for a clean canvas.';
products = [
{ label: 'Step 1 · Cleanse', name: 'Salicylic Silk Facewash', desc: 'Preps skin for active ingredient absorption.', link: 'https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis' },
{ label: 'Step 2 · Brighten', name: 'Vitamin C Serum', desc: '2% AA2G + Niacinamide — the gold standard spot treatment.', link: 'https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis' }
];
} else if (concern === 'dullness') {
title = 'The Radiance Ritual';
desc = 'Your skin is calling for a glow reset. The Vitamin C Serum delivers instant luminosity while the Hyaluronic Acid plumps and hydrates — restoring that healthy, lit-from-within radiance.';
products = [
{ label: 'Hero Product', name: 'Vitamin C Serum', desc: 'Brightens, hydrates and boosts radiance instantly.', link: 'https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis' },
{ label: 'Supporting Step', name: 'Salicylic Silk Facewash', desc: 'Clears the skin surface for better glow expression.', link: 'https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis' }
];
} else {
title = 'The Anti-Ageing Ritual';
desc = 'Your skin needs collagen stimulation and deep hydration. The Vitamin C Serum boosts collagen production while Hyaluronic Acid plumps fine lines — a powerful duo for youthful, firm skin.';
products = [
{ label: 'Priority Product', name: 'Vitamin C Serum', desc: 'Stimulates collagen, reduces fine lines, deeply hydrates.', link: 'https://www.amazon.in/Verses-Radiance-Niacinamide-Moroccan-Brightening/dp/B0FQFMFNSF/ref=ast_sto_dp_puis' },
{ label: 'Supporting Step', name: 'Salicylic Silk Facewash', desc: 'Gently exfoliates for improved active absorption.', link: 'https://www.amazon.in/Verses-Salicylic-Facewash-Reduction-Hydrating/dp/B0FQM5WB6X/ref=ast_sto_dp_puis' }
];
}
document.getElementById('resultTitle').textContent = title;
document.getElementById('resultDesc').textContent = desc;
const prodHtml = products.map(p => `
<div class="quiz-rec-card">
<div class="quiz-rec-label">${p.label}</div>
<div class="quiz-rec-name">${p.name}</div>
<div class="quiz-rec-desc">${p.desc}</div>
<a href="${p.link}" target="_blank" class="amazon-btn" style="font-size:10px;padding:10px 18px;">Buy on Amazon →</a>
</div>
`).join('');
document.getElementById('resultProducts').innerHTML = prodHtml;
}
function restartQuiz() {
quizAnswers = {};
currentStep = 1;
document.querySelectorAll('.quiz-step').forEach(s => s.classList.remove('active'));
document.querySelector('[data-step="1"]').classList.add('active');
document.querySelectorAll('.quiz-option').forEach(o => o.classList.remove('selected'));
document.getElementById('quizProgress').style.width = '0%';
}
// ── INGREDIENTS PANEL ──
const ingData = {
vitc: {
name: 'AA2G Vitamin C',
desc: 'AA2G (Ascorbyl Glucoside) is the gold standard in Vitamin C stability. Unlike conventional L-ascorbic acid that oxidises rapidly, AA2G converts to pure Vitamin C inside skin cells — delivering maximum potency exactly where it\'s needed, without irritation or oxidation.',
benefits: ['Inhibits melanin synthesis for spot fading', 'Stimulates collagen production', 'Neutralises free radical damage', 'Stable at all pH levels — no yellowing', 'Non-irritating for sensitive skin types']
},
niac: {
name: 'Niacinamide (B3)',
desc: 'Niacinamide is a multitasking powerhouse that addresses pores, oiliness, pigmentation, and inflammation simultaneously. It works synergistically with Vitamin C to amplify brightening results while maintaining the skin barrier.',
benefits: ['Minimises the appearance of pores', 'Regulates sebum production', 'Strengthens the skin barrier', 'Reduces redness and blotchiness', 'Improves skin texture and smoothness']
},
ha: {
name: 'Hyaluronic Acid',
desc: 'Hyaluronic Acid is a naturally occurring humectant capable of holding 1000x its weight in water. Our formula uses multi-molecular weight HA to hydrate at both surface and deeper skin layers for lasting plumpness.',
benefits: ['Delivers deep, lasting hydration', 'Plumps fine lines and wrinkles', 'Supports skin barrier function', 'Enhances absorption of other actives', 'Suitable for all skin types including oily']
},
argan: {
name: 'Moroccan Argan Oil',
desc: 'Sourced from the Moroccan Argan tree, this liquid gold is rich in Vitamin E, essential fatty acids, and antioxidants. It nourishes without clogging pores and creates a protective shield against environmental stressors.',
benefits: ['Non-comedogenic deep nourishment', 'Rich in Vitamin E and omega fatty acids', 'Antioxidant protection from free radicals', 'Improves skin elasticity and suppleness', 'Halal-certified and ethically sourced']
},
bha: {
name: 'BHA Salicylic Acid',
desc: 'Salicylic Acid is an oil-soluble beta-hydroxy acid that penetrates deep into pores, dissolving the debris and sebum that cause blackheads and breakouts. It also exfoliates the skin surface for a smoother, clearer complexion.',
benefits: ['Penetrates and unclogs pores at the source', 'Reduces active acne and prevents new breakouts', 'Exfoliates dead skin cells gently', 'Controls excess sebum production', 'Reduces blackheads and whiteheads']
}
};
function showIngredient(key) {
document.querySelectorAll('.ing-item').forEach(i => i.classList.remove('active'));
document.querySelector(`.ing-item[onclick*="'${key}'"]`).classList.add('active');
const data = ingData[key];
document.getElementById('ingName').textContent = data.name;
document.getElementById('ingDesc').textContent = data.desc;
document.getElementById('ingBenefits').innerHTML = data.benefits.map(b => `<li>${b}</li>`).join('');
// Animate panel
const panel = document.getElementById('ingPanel');
panel.style.opacity = '0';
panel.style.transform = 'translateY(10px)';
setTimeout(() => {
panel.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
panel.style.opacity = '1';
panel.style.transform = 'translateY(0)';
}, 50);
}
// ── SMOOTH ANCHOR SCROLL ──
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const target = document.querySelector(a.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</div>
V E R S E S S K I N 