<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ROLOMON — Future in Motion</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--black: #000;
--dark: #06060e;
--cyan: #00d4ff;
--blue: #0055ff;
--white: #ffffff;
--gray: #888;
--card: rgba(255,255,255,0.03);
--glow: rgba(0,212,255,0.25);
}
html { scroll-behavior: smooth; }
body {
background: var(--black);
color: var(--white);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
/* Grid background */
body::before {
content: '';
position: fixed; inset: 0;
background-image:
linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none; z-index: 0;
}
/* Radial glow */
body::after {
content: '';
position: fixed; inset: 0;
background:
radial-gradient(ellipse at 15% 60%, rgba(0,80,255,0.07) 0%, transparent 50%),
radial-gradient(ellipse at 85% 20%, rgba(0,212,255,0.06) 0%, transparent 45%);
pointer-events: none; z-index: 0;
}
section, nav, footer { position: relative; z-index: 1; }
/* ─── NAV ─────────────────────────────────────── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 1.1rem 3rem;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.75);
backdrop-filter: blur(22px);
}
.nav-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.nav-logo svg { width: 26px; height: 26px; }
.nav-brand { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .22em; color: #fff; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
font-family: 'Rajdhani', sans-serif; font-size: .8rem; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.45); text-decoration: none; transition: color .3s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-cta {
font-family: 'Rajdhani', sans-serif; font-size: .78rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
padding: .5rem 1.5rem; border: 1px solid var(--cyan);
color: var(--cyan); background: transparent; cursor: pointer; transition: all .3s;
}
.nav-cta:hover { background: var(--cyan); color: #000; }
/* ─── HERO ────────────────────────────────────── */
#hero {
min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 8rem 2rem 5rem;
}
.hero-eyebrow {
font-family: 'Rajdhani', sans-serif; font-size: .72rem; font-weight: 500;
letter-spacing: .42em; text-transform: uppercase; color: var(--cyan);
margin-bottom: 1.6rem;
opacity: 0; animation: fadeUp .8s ease forwards .3s;
}
.hero-mark {
margin-bottom: 1.8rem;
opacity: 0; animation: fadeUp .8s ease forwards .5s;
}
.hero-mark svg {
width: clamp(56px, 11vw, 96px);
filter: drop-shadow(0 0 32px rgba(0,212,255,.55));
}
.hero-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(5.5rem, 19vw, 15rem);
font-weight: 400; letter-spacing: .04em; line-height: .88;
background: linear-gradient(175deg, #fff 0%, rgba(255,255,255,.4) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: .8rem;
opacity: 0; animation: fadeUp 1s ease forwards .7s;
}
.hero-tagline {
font-family: 'Rajdhani', sans-serif; font-size: clamp(.85rem, 2.8vw, 1.45rem);
font-weight: 300; letter-spacing: .55em; text-transform: uppercase;
color: rgba(255,255,255,.45); margin-bottom: 3.2rem;
opacity: 0; animation: fadeUp .8s ease forwards .9s;
}
.hero-tagline em { font-style: normal; color: var(--cyan); font-weight: 600; }
/* Countdown */
.cd-wrap { margin-bottom: 3.5rem; opacity: 0; animation: fadeUp .8s ease forwards 1.1s; }
.cd-label {
font-family: 'Rajdhani', sans-serif; font-size: .68rem; letter-spacing: .35em;
text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: .9rem;
}
.cd {
display: flex; gap: clamp(.8rem, 2.5vw, 2rem); justify-content: center; align-items: flex-start;
}
.cd-item { text-align: center; min-width: 64px; }
.cd-num {
font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.6rem, 7vw, 4.8rem);
line-height: 1; color: #fff; display: block;
text-shadow: 0 0 28px rgba(0,212,255,.4);
}
.cd-unit {
font-family: 'Rajdhani', sans-serif; font-size: .62rem; letter-spacing: .28em;
text-transform: uppercase; color: var(--cyan); margin-top: .25rem;
}
.cd-sep {
font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem);
color: rgba(0,212,255,.3); line-height: 1.05;
}
/* CTA row */
.hero-btns {
display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
opacity: 0; animation: fadeUp .8s ease forwards 1.3s;
}
.btn-solid {
font-family: 'Rajdhani', sans-serif; font-size: .9rem; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
padding: 1rem 3rem; background: var(--cyan); color: #000; border: none;
cursor: pointer; transition: all .3s;
clip-path: polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.btn-solid:hover { background: #fff; box-shadow: 0 0 40px rgba(0,212,255,.5); }
.btn-ghost {
font-family: 'Rajdhani', sans-serif; font-size: .9rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
padding: 1rem 2.5rem; background: transparent;
color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.15); cursor: pointer; transition: all .3s;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
/* Scroll line */
.scroll-hint {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: .45rem;
opacity: 0; animation: fadeIn 1s ease forwards 2s;
}
.scroll-hint span {
font-family: 'Rajdhani', sans-serif; font-size: .6rem; letter-spacing: .32em;
text-transform: uppercase; color: rgba(255,255,255,.2);
}
.scroll-line {
width: 1px; height: 52px;
background: linear-gradient(to bottom, rgba(0,212,255,.5), transparent);
animation: linePulse 2s ease-in-out infinite;
}
@keyframes linePulse { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(.65)} }
/* ─── STATS BAR ───────────────────────────────── */
.stats-bar {
display: flex; justify-content: center; flex-wrap: wrap; gap: 3.5rem;
padding: 1.6rem 2rem;
background: rgba(0,212,255,0.04);
border-top: 1px solid rgba(0,212,255,.12);
border-bottom: 1px solid rgba(0,212,255,.12);
}
.stat { text-align: center; }
.stat-n { font-family:'Bebas Neue',sans-serif; font-size:2rem; color:var(--cyan); display:block; }
.stat-l { font-family:'Rajdhani',sans-serif; font-size:.65rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.35); }
/* ─── SECTION COMMONS ─────────────────────────── */
.sec-ey { font-family:'Rajdhani',sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--cyan); margin-bottom:.7rem; }
.sec-h { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.6rem,6vw,5rem); letter-spacing:.04em; line-height:1; color:#fff; }
.sec-p { font-size:.92rem; color:rgba(255,255,255,.38); margin-top:.9rem; max-width:520px; line-height:1.8; font-weight:300; }
.sec-hdr{ text-align:center; margin-bottom:3.8rem; }
.sec-line{ width:56px; height:2px; background:var(--cyan); margin:1rem auto 0; box-shadow:0 0 10px var(--cyan); }
/* ─── BRAND STATEMENT ─────────────────────────── */
#statement {
padding: 7rem 2rem;
display: flex; align-items: center; justify-content: center;
}
.statement {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1.5rem, 4vw, 2.9rem);
font-weight: 300; line-height: 1.55;
color: rgba(255,255,255,.6); text-align: center;
max-width: 860px;
}
.statement strong { color: #fff; font-weight: 700; }
.statement .ac { color: var(--cyan); }
/* ─── PRODUCTS ────────────────────────────────── */
#products { padding: 5rem 0; max-width: 1440px; margin: 0 auto; }
#products .sec-hdr { padding: 0 2rem; }
.prod-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.prod-card {
position: relative; aspect-ratio: 3/4;
overflow: hidden; cursor: pointer; background: #080810;
}
.prod-bg {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: clamp(3.5rem, 6vw, 5.5rem);
transition: transform .6s ease;
}
.prod-card:hover .prod-bg { transform: scale(1.1); }
.prod-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
transition: background .4s;
}
.prod-card:hover .prod-overlay { background: linear-gradient(to top, rgba(0,10,25,.96) 0%, rgba(0,40,70,.25) 55%, transparent 100%); }
.prod-info {
position: absolute; bottom: 0; left: 0; right: 0; padding: 1.4rem;
transform: translateY(6px); transition: transform .4s;
}
.prod-card:hover .prod-info { transform: translateY(0); }
.prod-tag { font-family:'Rajdhani',sans-serif; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); margin-bottom:.3rem; }
.prod-name { font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:.3rem; }
.prod-spec { font-size:.72rem; color:rgba(255,255,255,.38); font-weight:300; }
.prod-badge {
position: absolute; top: .9rem; right: .9rem;
font-family:'Rajdhani',sans-serif; font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
color:var(--cyan); border:1px solid rgba(0,212,255,.35); padding:.22rem .55rem;
background:rgba(0,0,0,.6);
}
.p1 { background: radial-gradient(circle at 45% 35%, #0b1830, #000); }
.p2 { background: radial-gradient(circle at 45% 35%, #0b201a, #000); }
.p3 { background: radial-gradient(circle at 45% 35%, #1a1a0c, #000); }
.p4 { background: radial-gradient(circle at 45% 35%, #180b20, #000); }
.p5 { background: radial-gradient(circle at 45% 35%, #0b1a1a, #000); }
.p6 { background: radial-gradient(circle at 45% 35%, #0b0b1a, #000); }
.p7 { background: radial-gradient(circle at 45% 35%, #1a0b0b, #000); }
.p8 { background: radial-gradient(circle at 45% 35%, #181818, #000); }
.p9 { background: radial-gradient(circle at 45% 35%, #0b1830, #000); }
.p10 { background: radial-gradient(circle at 45% 35%, #0c1a0c, #000); }
.p11 { background: radial-gradient(circle at 45% 35%, #1a1a0b, #000); }
.p12 { background: radial-gradient(circle at 45% 35%, #1a0b18, #000); }
/* ─── COLLECTIONS ─────────────────────────────── */
#collections { padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; }
.coll-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.coll-card {
position: relative; padding: 2.8rem 2rem;
border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02);
overflow: hidden; transition: border-color .4s, background .4s;
}
.coll-card:hover { border-color: rgba(0,212,255,.28); background: rgba(0,212,255,.025); }
.coll-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
transform: scaleX(0); transition: transform .5s;
}
.coll-card:hover::before { transform: scaleX(1); }
.coll-num { font-family:'Bebas Neue',sans-serif; font-size:5rem; color:rgba(255,255,255,.04); position:absolute; top:.8rem; right:1.2rem; line-height:1; }
.coll-icon { font-size:2.2rem; display:block; margin-bottom:1.4rem; }
.coll-name { font-family:'Rajdhani',sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin-bottom:.7rem; }
.coll-desc { font-size:.85rem; color:rgba(255,255,255,.4); line-height:1.75; font-weight:300; margin-bottom:1.4rem; }
.coll-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.coll-tag { font-family:'Rajdhani',sans-serif; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(0,212,255,.75); border:1px solid rgba(0,212,255,.2); padding:.2rem .55rem; }
/* ─── FEATURES ────────────────────────────────── */
#features {
padding: 5rem 2rem;
border-top: 1px solid rgba(255,255,255,.04);
border-bottom: 1px solid rgba(255,255,255,.04);
background: rgba(255,255,255,.01);
}
.feat-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.feat { text-align:center; padding:2rem 1rem; }
.feat-icon { font-size:2rem; display:block; margin-bottom:1rem; }
.feat-name { font-family:'Rajdhani',sans-serif; font-size:.92rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:.5rem; }
.feat-desc { font-size:.78rem; color:rgba(255,255,255,.38); line-height:1.65; font-weight:300; }
/* ─── VISION ──────────────────────────────────── */
#vision {
padding: 8rem 2rem; max-width:1200px; margin:0 auto;
display: grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
}
.vis-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(3rem,5vw,5rem); line-height:.95; color:#fff; margin-bottom:1.8rem; }
.vis-title span { color:var(--cyan); }
.vis-p { font-size:.92rem; color:rgba(255,255,255,.45); line-height:1.9; font-weight:300; margin-bottom:1.3rem; }
.vis-vals { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.2rem; }
.val {
padding:1.1rem 1rem; border-left:2px solid var(--cyan); background:rgba(0,212,255,.03);
}
.val-n { font-family:'Rajdhani',sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:.25rem; }
.val-d { font-size:.75rem; color:rgba(255,255,255,.38); line-height:1.55; }
.vis-box {
aspect-ratio:1; position:relative;
background:radial-gradient(circle at 40% 40%, #091e3d, #000);
border:1px solid rgba(0,212,255,.1);
display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.vis-box::before {
content:''; position:absolute; width:200%; height:200%;
background:conic-gradient(from 0deg, transparent 0deg, rgba(0,212,255,.045) 60deg, transparent 120deg);
animation: spin 20s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.vis-inner { position:relative; text-align:center; }
.vis-inner svg { width:clamp(80px,14vw,140px); filter:drop-shadow(0 0 40px rgba(0,212,255,.5)); }
.vis-inner p { font-family:'Rajdhani',sans-serif; font-size:.68rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(0,212,255,.6); margin-top:1rem; }
.corner { position:absolute; width:18px; height:18px; }
.tl { top:12px; left:12px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.tr { top:12px; right:12px; border-top:2px solid var(--cyan); border-right:2px solid var(--cyan); }
.bl { bottom:12px; left:12px; border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.br { bottom:12px; right:12px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); }
/* ─── NEWSLETTER ──────────────────────────────── */
#newsletter {
padding: 9rem 2rem; text-align:center; position:relative; overflow:hidden;
}
#newsletter::before {
content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:700px; height:700px;
background:radial-gradient(circle, rgba(0,212,255,.055) 0%, transparent 70%);
pointer-events:none;
}
.nl-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(3rem,7vw,6.5rem); color:#fff; line-height:.95; margin-bottom:1rem; }
.nl-sub { font-size:.92rem; color:rgba(255,255,255,.42); font-weight:300; margin-bottom:2.8rem; max-width:440px; margin-left:auto; margin-right:auto; line-height:1.75; }
.nl-form { display:flex; max-width:480px; margin:0 auto 1rem; }
.nl-input {
flex:1; padding:1rem 1.4rem;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-right:none;
color:#fff; font-family:'Inter',sans-serif; font-size:.88rem; outline:none; transition:border-color .3s;
}
.nl-input::placeholder { color:rgba(255,255,255,.22); }
.nl-input:focus { border-color:rgba(0,212,255,.4); }
.nl-btn {
padding:1rem 1.8rem; background:var(--cyan); color:#000; border:none;
font-family:'Rajdhani',sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
cursor:pointer; transition:background .3s; white-space:nowrap;
}
.nl-btn:hover { background:#fff; }
.nl-note { font-size:.7rem; color:rgba(255,255,255,.18); letter-spacing:.05em; }
.nl-ok { display:none; margin-top:1rem; color:var(--cyan); font-family:'Rajdhani',sans-serif; font-size:.9rem; letter-spacing:.12em; }
/* ─── FOOTER ──────────────────────────────────── */
footer { border-top:1px solid rgba(255,255,255,.06); padding:4rem 3rem 2.5rem; }
.ft-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.ft-brand { display:flex; flex-direction:column; gap:.9rem; }
.ft-logo { display:flex; align-items:center; gap:.55rem; }
.ft-logo svg { width:26px; }
.ft-bname { font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:700; letter-spacing:.22em; color:#fff; }
.ft-desc { font-size:.8rem; color:rgba(255,255,255,.32); line-height:1.75; font-weight:300; max-width:270px; }
.ft-socials { display:flex; gap:.7rem; margin-top:.3rem; }
.soc {
width:34px; height:34px; border:1px solid rgba(255,255,255,.1);
display:flex; align-items:center; justify-content:center;
color:rgba(255,255,255,.38); text-decoration:none;
font-family:'Rajdhani',sans-serif; font-size:.72rem; font-weight:700;
transition:all .3s;
}
.soc:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,.05); }
.ft-col h4 { font-family:'Rajdhani',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.ft-col ul { list-style:none; }
.ft-col li { margin-bottom:.65rem; }
.ft-col a { font-size:.8rem; color:rgba(255,255,255,.32); text-decoration:none; transition:color .3s; letter-spacing:.03em; }
.ft-col a:hover { color:var(--cyan); }
.ft-bot {
border-top:1px solid rgba(255,255,255,.05); padding-top:1.8rem;
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.ft-copy { font-size:.72rem; color:rgba(255,255,255,.18); letter-spacing:.05em; }
.ft-tag { font-family:'Rajdhani',sans-serif; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(0,212,255,.55); }
/* ─── ANIMATIONS ──────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }
/* ─── RESPONSIVE ──────────────────────────────── */
@media(max-width:1100px) {
.prod-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
nav { padding:1rem 1.5rem; }
.nav-links { display:none; }
.prod-grid { grid-template-columns:repeat(2,1fr); }
.coll-grid { grid-template-columns:1fr; }
#vision { grid-template-columns:1fr; gap:3rem; }
.feat-grid { grid-template-columns:repeat(2,1fr); }
.ft-top { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:560px) {
.prod-grid { grid-template-columns:repeat(2,1fr); }
.vis-vals { grid-template-columns:1fr; }
.nl-form { flex-direction:column; }
.nl-input { border-right:1px solid rgba(255,255,255,.1); }
.ft-top { grid-template-columns:1fr; }
.stats-bar { gap:2rem; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a href="#" class="nav-logo">
<svg viewBox="0 0 70 70" fill="none"><path fill="white" d="M8,8 L8,62 L20,62 L20,42 L32,42 L50,62 L64,62 L45,41 C53,38 58,31 58,22 C58,11 50,8 38,8 Z M20,19 L36,19 C42,19 46,22 46,26 C46,31 42,33 36,33 L20,33 Z"/></svg>
<span class="nav-brand">ROLOMON</span>
</a>
<ul class="nav-links">
<li><a href="#products">Products</a></li>
<li><a href="#collections">Collections</a></li>
<li><a href="#vision">Vision</a></li>
<li><a href="#newsletter">Early Access</a></li>
</ul>
<button class="nav-cta" onclick="document.getElementById('newsletter').scrollIntoView({behavior:'smooth'})">Notify Me</button>
</nav>
<!-- HERO -->
<section id="hero">
<p class="hero-eyebrow">Est. 2026 · Premium Brand · Coming Soon</p>
<div class="hero-mark">
<svg viewBox="0 0 70 70" fill="none"><path fill="white" d="M8,8 L8,62 L20,62 L20,42 L32,42 L50,62 L64,62 L45,41 C53,38 58,31 58,22 C58,11 50,8 38,8 Z M20,19 L36,19 C42,19 46,22 46,26 C46,31 42,33 36,33 L20,33 Z"/></svg>
</div>
<h1 class="hero-title">ROLOMON</h1>
<p class="hero-tagline"><em>Future</em> · in · <em>Motion</em></p>
<div class="cd-wrap">
<p class="cd-label">Launching In</p>
<div class="cd">
<div class="cd-item"><span class="cd-num" id="d">000</span><span class="cd-unit">Days</span></div>
<span class="cd-sep">:</span>
<div class="cd-item"><span class="cd-num" id="h">00</span><span class="cd-unit">Hours</span></div>
<span class="cd-sep">:</span>
<div class="cd-item"><span class="cd-num" id="m">00</span><span class="cd-unit">Mins</span></div>
<span class="cd-sep">:</span>
<div class="cd-item"><span class="cd-num" id="s">00</span><span class="cd-unit">Secs</span></div>
</div>
</div>
<div class="hero-btns">
<button class="btn-solid" onclick="document.getElementById('newsletter').scrollIntoView({behavior:'smooth'})">Get Early Access</button>
<button class="btn-ghost" onclick="document.getElementById('products').scrollIntoView({behavior:'smooth'})">Preview Products</button>
</div>
<div class="scroll-hint">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- STATS -->
<div class="stats-bar reveal">
<div class="stat"><span class="stat-n">12</span><span class="stat-l">Products</span></div>
<div class="stat"><span class="stat-n">3</span><span class="stat-l">Collections</span></div>
<div class="stat"><span class="stat-n">1</span><span class="stat-l">Brand</span></div>
<div class="stat"><span class="stat-n">∞</span><span class="stat-l">Ambition</span></div>
</div>
<!-- STATEMENT -->
<section id="statement">
<p class="statement reveal">
We don't make products.<br/>
We craft <strong>experiences</strong> — designed for those who move with <span class="ac">purpose</span>,<br/>
live with <strong>intention</strong>, and demand the <span class="ac">future</span> today.
</p>
</section>
<!-- PRODUCTS -->
<section id="products">
<div class="sec-hdr reveal">
<p class="sec-ey">What's Coming</p>
<h2 class="sec-h">The Collection</h2>
<p class="sec-p" style="margin:0 auto">12 meticulously designed products across tech, lifestyle, and apparel. Each piece built to the same uncompromising standard.</p>
<div class="sec-line"></div>
</div>
<div class="prod-grid">
<div class="prod-card reveal"><div class="prod-bg p1">🎧</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Tech · Audio</p><p class="prod-name">Pro Headphones</p><p class="prod-spec">Wireless · ANC · 40hr battery</p></div></div>
<div class="prod-card reveal d1"><div class="prod-bg p2">💧</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Lifestyle · Hydration</p><p class="prod-name">Insulated Bottle</p><p class="prod-spec">500ml · Matte black · 24hr cold</p></div></div>
<div class="prod-card reveal d2"><div class="prod-bg p3">🎒</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Lifestyle · Carry</p><p class="prod-name">Tech Pack</p><p class="prod-spec">30L · USB-C port · Anti-theft</p></div></div>
<div class="prod-card reveal d3"><div class="prod-bg p4">⌚</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Tech · Wearables</p><p class="prod-name">SmartWatch</p><p class="prod-spec">AMOLED · Health · NFC</p></div></div>
<div class="prod-card reveal"><div class="prod-bg p5">📓</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Lifestyle · Stationery</p><p class="prod-name">Signature Set</p><p class="prod-spec">Notebook + Pen · Premium leather</p></div></div>
<div class="prod-card reveal d1"><div class="prod-bg p6">🎵</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Tech · Audio</p><p class="prod-name">Air Buds Pro</p><p class="prod-spec">TWS · ANC · Wireless charging</p></div></div>
<div class="prod-card reveal d2"><div class="prod-bg p7">🔋</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Tech · Power</p><p class="prod-name">PowerCore 20K</p><p class="prod-spec">20,000mAh · 65W fast charge</p></div></div>
<div class="prod-card reveal d3"><div class="prod-bg p8">📦</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Lifestyle · Gifting</p><p class="prod-name">Gift Collection</p><p class="prod-spec">Curated sets · Premium packaging</p></div></div>
<div class="prod-card reveal"><div class="prod-bg p9">🕶️</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Apparel · Eyewear</p><p class="prod-name">Titanium Shades</p><p class="prod-spec">Polarized · UV400 · Matte black</p></div></div>
<div class="prod-card reveal d1"><div class="prod-bg p10">👜</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Lifestyle · Sport</p><p class="prod-name">Motion Duffel</p><p class="prod-spec">40L · Water-resistant · Shoe pocket</p></div></div>
<div class="prod-card reveal d2"><div class="prod-bg p11">🧥</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Apparel · Premium</p><p class="prod-name">Signature Hoodie</p><p class="prod-spec">400gsm · Oversized · Matte black</p></div></div>
<div class="prod-card reveal d3"><div class="prod-bg p12">👕</div><div class="prod-overlay"></div><span class="prod-badge">Soon</span><div class="prod-info"><p class="prod-tag">Apparel · Essential</p><p class="prod-name">Classic Tee</p><p class="prod-spec">100% cotton · Drop fit · Unisex</p></div></div>
</div>
</section>
<!-- COLLECTIONS -->
<section id="collections">
<div class="sec-hdr reveal">
<p class="sec-ey">Three Worlds</p>
<h2 class="sec-h">The Collections</h2>
<div class="sec-line"></div>
</div>
<div class="coll-grid">
<div class="coll-card reveal">
<span class="coll-num">01</span>
<span class="coll-icon">⚡</span>
<h3 class="coll-name">ROLOMON Tech</h3>
<p class="coll-desc">Cutting-edge personal technology engineered for the modern lifestyle. Every device designed to perform at the speed you live.</p>
<div class="coll-tags"><span class="coll-tag">Headphones</span><span class="coll-tag">Earbuds</span><span class="coll-tag">SmartWatch</span><span class="coll-tag">PowerCore</span></div>
</div>
<div class="coll-card reveal d2">
<span class="coll-num">02</span>
<span class="coll-icon">🌊</span>
<h3 class="coll-name">ROLOMON Life</h3>
<p class="coll-desc">Premium everyday carry and lifestyle essentials. Understated luxury that moves with you from morning to midnight.</p>
<div class="coll-tags"><span class="coll-tag">Tech Pack</span><span class="coll-tag">Water Bottle</span><span class="coll-tag">Duffel</span><span class="coll-tag">Signature Set</span><span class="coll-tag">Gift Box</span></div>
</div>
<div class="coll-card reveal d3">
<span class="coll-num">03</span>
<span class="coll-icon">🔥</span>
<h3 class="coll-name">ROLOMON Wear</h3>
<p class="coll-desc">Minimal. Intentional. Statement. Apparel that carries the brand without shouting it — for those who already know.</p>
<div class="coll-tags"><span class="coll-tag">Hoodie</span><span class="coll-tag">Classic Tee</span><span class="coll-tag">Sunglasses</span></div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features">
<div class="feat-grid">
<div class="feat reveal"><span class="feat-icon">🛡️</span><p class="feat-name">Premium Quality</p><p class="feat-desc">Every product rigorously tested. Materials selected for durability, feel, and finish.</p></div>
<div class="feat reveal d1"><span class="feat-icon">🚀</span><p class="feat-name">Fast Shipping</p><p class="feat-desc">Worldwide delivery from launch day. Tracked, insured, packed with care.</p></div>
<div class="feat reveal d2"><span class="feat-icon">♾️</span><p class="feat-name">Lifetime Support</p><p class="feat-desc">We stand behind every product. Real support from real people, always.</p></div>
<div class="feat reveal d3"><span class="feat-icon">🌍</span><p class="feat-name">Global Community</p><p class="feat-desc">ROLOMON is a movement. Join from anywhere in the world.</p></div>
</div>
</section>
<!-- VISION -->
<section id="vision">
<div class="vis-content reveal">
<p class="sec-ey">Our Vision</p>
<h2 class="vis-title">THE<br/>FUTURE<br/><span>IS NOW</span></h2>
<p class="vis-p">ROLOMON was born from a simple belief: that premium, forward-thinking products should be accessible to everyone with the ambition to reach for them — not just the few, not just the wealthy.</p>
<p class="vis-p">Every product in the collection is designed with obsessive attention to detail, from the first sketch to the final finish. We don't release until it's right.</p>
<div class="vis-vals">
<div class="val reveal"><p class="val-n">Design First</p><p class="val-d">Form and function in perfect balance. Every edge intentional.</p></div>
<div class="val reveal d1"><p class="val-n">Built to Last</p><p class="val-d">Premium materials, zero compromise on durability.</p></div>
<div class="val reveal d2"><p class="val-n">Bold Identity</p><p class="val-d">Understated but unmistakable on every product.</p></div>
<div class="val reveal d3"><p class="val-n">Future Forward</p><p class="val-d">Always one step ahead. Technology meets lifestyle.</p></div>
</div>
</div>
<div class="reveal d2">
<div class="vis-box">
<div class="corner tl"></div><div class="corner tr"></div>
<div class="corner bl"></div><div class="corner br"></div>
<div class="vis-inner">
<svg viewBox="0 0 70 70" fill="none"><path fill="white" d="M8,8 L8,62 L20,62 L20,42 L32,42 L50,62 L64,62 L45,41 C53,38 58,31 58,22 C58,11 50,8 38,8 Z M20,19 L36,19 C42,19 46,22 46,26 C46,31 42,33 36,33 L20,33 Z"/></svg>
<p>Future In Motion</p>
</div>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section id="newsletter">
<p class="sec-ey reveal">Be First</p>
<h2 class="nl-title reveal">GET EARLY<br/>ACCESS</h2>
<p class="nl-sub reveal">Join the ROLOMON waitlist. Get notified on launch day, unlock exclusive early-bird pricing, and be the first to own the collection.</p>
<form class="nl-form reveal" onsubmit="signup(event)">
<input type="email" class="nl-input" id="nl-email" placeholder="Your email address" required/>
<button type="submit" class="nl-btn">Notify Me</button>
</form>
<p class="nl-note reveal">No spam. Just the launch. Unsubscribe anytime.</p>
<p class="nl-ok" id="nl-ok">✓ You're on the list. See you at launch.</p>
</section>
<!-- FOOTER -->
<footer>
<div class="ft-top">
<div class="ft-brand">
<div class="ft-logo">
<svg viewBox="0 0 70 70" fill="none"><path fill="white" d="M8,8 L8,62 L20,62 L20,42 L32,42 L50,62 L64,62 L45,41 C53,38 58,31 58,22 C58,11 50,8 38,8 Z M20,19 L36,19 C42,19 46,22 46,26 C46,31 42,33 36,33 L20,33 Z"/></svg>
<span class="ft-bname">ROLOMON</span>
</div>
<p class="ft-desc">A premium brand built for those who move with purpose. Designed for the future. Built for today.</p>
<div class="ft-socials">
<a href="#" class="soc">IG</a>
<a href="#" class="soc">TW</a>
<a href="#" class="soc">TK</a>
<a href="#" class="soc">YT</a>
</div>
</div>
<div class="ft-col">
<h4>Products</h4>
<ul>
<li><a href="#">Tech Collection</a></li>
<li><a href="#">Lifestyle Collection</a></li>
<li><a href="#">Apparel Collection</a></li>
<li><a href="#">Gift Sets</a></li>
</ul>
</div>
<div class="ft-col">
<h4>Company</h4>
<ul>
<li><a href="#">About ROLOMON</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="ft-col">
<h4>Support</h4>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="ft-bot">
<p class="ft-copy">© 2026 ROLOMON. All rights reserved.</p>
<p class="ft-tag">Future In Motion</p>
</div>
</footer>
<script>
// Countdown — launches Oct 1 2026
const LAUNCH = new Date('2026-10-01T00:00:00').getTime();
function tick() {
const diff = Math.max(0, LAUNCH - Date.now());
document.getElementById('d').textContent = String(Math.floor(diff/86400000)).padStart(3,'0');
document.getElementById('h').textContent = String(Math.floor(diff%86400000/3600000)).padStart(2,'0');
document.getElementById('m').textContent = String(Math.floor(diff%3600000/60000)).padStart(2,'0');
document.getElementById('s').textContent = String(Math.floor(diff%60000/1000)).padStart(2,'0');
}
tick(); setInterval(tick, 1000);
// Scroll reveal
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vis'); io.unobserve(e.target); } });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
// Newsletter
function signup(e) {
e.preventDefault();
document.querySelector('.nl-form').style.display = 'none';
document.querySelector('.nl-note').style.display = 'none';
document.getElementById('nl-ok').style.display = 'block';
}
</script>
</body>
</html>