/* ═══════════════════════════════════════════════ RESET & ROOT ═══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --magenta: #8B1A4A; --magenta-dark: #6B1238; --magenta-light: #C4537A; --gold: #C9A84C; --gold-light: #E8C97A; --gold-dim: rgba(201,168,76,0.35); --cream: #FDF6EE; --cream-dim: rgba(253,246,238,0.7); --charcoal: #120808; } html { scroll-behavior: smooth; } body { min-height: 100vh; background: var(--charcoal); color: var(--cream); font-family: 'Raleway', sans-serif; overflow-x: hidden; } /* ═══════════════════════════════════════════════ BACKGROUND LAYERS ═══════════════════════════════════════════════ */ .bg-layer { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(139,26,74,0.40) 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 85% 100%, rgba(201,168,76,0.10) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 5% 80%, rgba(139,26,74,0.12) 0%, transparent 60%), linear-gradient(160deg, #130808 0%, #1A0F0F 45%, #0D0808 100%); } /* Subtle radial rings */ .bg-rings { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } .bg-rings span { position: absolute; border-radius: 50%; border: 1px solid rgba(201,168,76,0.06); } .bg-rings span:nth-child(1) { width: 340px; height: 340px; } .bg-rings span:nth-child(2) { width: 560px; height: 560px; border-color: rgba(201,168,76,0.04); } .bg-rings span:nth-child(3) { width: 780px; height: 780px; border-color: rgba(139,26,74,0.05); } .bg-rings span:nth-child(4) { width: 1020px; height: 1020px; border-color: rgba(201,168,76,0.03); border-style: dashed; animation: rotateSlow 60s linear infinite; } .bg-rings span:nth-child(5) { width: 1260px; height: 1260px; border-color: rgba(139,26,74,0.03); animation: rotateSlow 90s linear infinite reverse; } @keyframes rotateSlow { to { transform: rotate(360deg); } } /* Particle canvas */ #particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ═══════════════════════════════════════════════ FALLING PETALS ═══════════════════════════════════════════════ */ .petal { position: fixed; pointer-events: none; z-index: 0; opacity: 0; animation: petalFall linear infinite; } @keyframes petalFall { 0% { transform: translateY(-30px) rotate(0deg) translateX(0px); opacity: 0; } 8% { opacity: 0.7; } 50% { transform: translateY(50vh) rotate(180deg) translateX(30px); opacity: 0.4; } 92% { opacity: 0.3; } 100% { transform: translateY(105vh) rotate(360deg) translateX(-20px); opacity: 0; } } /* ═══════════════════════════════════════════════ CORNER FILIGREE ═══════════════════════════════════════════════ */ .corner { position: fixed; width: 90px; height: 90px; z-index: 2; pointer-events: none; opacity: 0.6; } .corner-tl { top: 18px; left: 18px; } .corner-tr { top: 18px; right: 18px; transform: scaleX(-1); } .corner-bl { bottom: 18px; left: 18px; transform: scaleY(-1); } .corner-br { bottom: 18px; right: 18px; transform: scale(-1,-1); } /* ═══════════════════════════════════════════════ MAIN WRAPPER ═══════════════════════════════════════════════ */ .wrapper { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.5rem 5rem; text-align: center; } /* ═══════════════════════════════════════════════ LOGO ═══════════════════════════════════════════════ */ .logo-wrap { position: relative; margin-bottom: 2.2rem; animation: fadeUp 1.2s cubic-bezier(.22,1,.36,1) both; } .logo-glow { position: absolute; inset: -50px; background: radial-gradient(circle, rgba(139,26,74,0.45) 0%, transparent 70%); animation: pulseGlow 3.5s ease-in-out infinite; pointer-events: none; } @keyframes pulseGlow { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1.0; transform: scale(1.1); } } .logo-svg { position: relative; width: 210px; height: 210px; animation: logoFloat 4.5s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(139,26,74,0.55)) drop-shadow(0 0 10px rgba(201,168,76,0.30)); } @keyframes logoFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* ═══════════════════════════════════════════════ BRAND HEADING ═══════════════════════════════════════════════ */ .brand-name { font-family: 'Cinzel', serif; font-size: clamp(2rem, 6vw, 4rem); font-weight: 600; letter-spacing: 0.2em; color: var(--cream); text-shadow: 0 0 80px rgba(139,26,74,0.7); animation: fadeUp 1.2s 0.15s cubic-bezier(.22,1,.36,1) both; } .sub-divider { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 0.5rem 0 1.2rem; animation: fadeUp 1.2s 0.28s cubic-bezier(.22,1,.36,1) both; } .sub-divider::before, .sub-divider::after { content: ''; flex: 1; max-width: 100px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .sub-divider span { font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.4em; color: var(--gold); } /* ═══════════════════════════════════════════════ TAGLINE ═══════════════════════════════════════════════ */ .tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1rem, 2.5vw, 1.4rem); color: rgba(253,246,238,0.68); letter-spacing: 0.04em; max-width: 580px; line-height: 1.8; margin-bottom: 2.5rem; animation: fadeUp 1.2s 0.42s cubic-bezier(.22,1,.36,1) both; } /* ═══════════════════════════════════════════════ COMING SOON BADGE ═══════════════════════════════════════════════ */ .cs-badge { display: inline-block; border: 1px solid var(--gold); padding: 0.6rem 2.5rem; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.5em; color: var(--gold); margin-bottom: 3rem; position: relative; overflow: hidden; animation: fadeUp 1.2s 0.55s cubic-bezier(.22,1,.36,1) both; } .cs-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.22), transparent); animation: shimmer 2.6s ease-in-out infinite; } @keyframes shimmer { to { left: 200%; } } /* ═══════════════════════════════════════════════ COUNTDOWN ═══════════════════════════════════════════════ */ .countdown { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; animation: fadeUp 1.2s 0.7s cubic-bezier(.22,1,.36,1) both; } .cd-unit { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } .cd-box { position: relative; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201,168,76,0.28); background: rgba(139,26,74,0.10); } .cd-box::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201,168,76,0.07); } .cd-num { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; color: var(--cream); line-height: 1; transition: all 0.3s; } .cd-num.flip { animation: flipNum 0.45s cubic-bezier(.22,1,.36,1) both; } @keyframes flipNum { from { transform: rotateX(90deg) scale(0.8); opacity: 0; } to { transform: rotateX(0) scale(1); opacity: 1; } } .cd-label { font-family: 'Raleway', sans-serif; font-size: 0.62rem; letter-spacing: 0.3em; color: var(--gold); font-weight: 400; } .cd-sep { font-family: 'Cinzel', serif; font-size: 2.2rem; color: rgba(201,168,76,0.35); align-self: center; padding-bottom: 1.8rem; line-height: 1; } /* ═══════════════════════════════════════════════ FEATURE PILLS ═══════════════════════════════════════════════ */ .features { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 620px; margin-bottom: 3rem; animation: fadeUp 1.2s 0.85s cubic-bezier(.22,1,.36,1) both; } .pill { border: 1px solid rgba(139,26,74,0.45); background: rgba(139,26,74,0.08); padding: 0.5rem 1.3rem; font-family: 'Raleway', sans-serif; font-size: 0.76rem; letter-spacing: 0.12em; color: rgba(253,246,238,0.78); font-weight: 500; cursor: default; transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s; } .pill:hover { border-color: var(--gold); background: rgba(201,168,76,0.10); color: var(--gold-light); transform: translateY(-2px); } /* ═══════════════════════════════════════════════ EMAIL SIGNUP SECTION ═══════════════════════════════════════════════ */ .signup-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 3rem; animation: fadeUp 1.2s 1s cubic-bezier(.22,1,.36,1) both; width: 100%; max-width: 480px; } .signup-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: rgba(253,246,238,0.58); letter-spacing: 0.04em; } .signup-row { display: flex; width: 100%; } .signup-input { flex: 1; background: rgba(253,246,238,0.04); border: 1px solid rgba(201,168,76,0.28); border-right: none; padding: 0.8rem 1.2rem; color: var(--cream); font-family: 'Raleway', sans-serif; font-size: 0.85rem; letter-spacing: 0.05em; outline: none; transition: border-color 0.3s, background 0.3s; min-width: 0; } .signup-input::placeholder { color: rgba(253,246,238,0.28); } .signup-input:focus { border-color: var(--gold); background: rgba(201,168,76,0.04); } .signup-input.error { border-color: #e24b4a; } .signup-btn { background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-dark) 100%); border: 1px solid var(--magenta-light); padding: 0.8rem 1.6rem; color: var(--cream); font-family: 'Cinzel', serif; font-size: 0.70rem; letter-spacing: 0.22em; cursor: pointer; transition: background 0.3s, transform 0.15s; white-space: nowrap; } .signup-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--magenta-light) 0%, var(--magenta) 100%); transform: translateY(-1px); } .signup-btn:active:not(:disabled) { transform: translateY(0); } .signup-btn:disabled { cursor: default; opacity: 0.7; } .signup-btn.success { background: linear-gradient(135deg, #2d7a3a 0%, #1e5828 100%); border-color: #5aba6e; } .signup-btn.loading { opacity: 0.8; } .signup-status { font-family: 'Raleway', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; min-height: 1.2rem; transition: color 0.3s; } .signup-status.ok { color: #5aba6e; } .signup-status.err { color: #e24b4a; } /* ═══════════════════════════════════════════════ CONTACT ROW (no social icons yet) ═══════════════════════════════════════════════ */ .contact-info { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; animation: fadeUp 1.2s 1.15s cubic-bezier(.22,1,.36,1) both; margin-bottom: 1rem; } .contact-line { font-family: 'Raleway', sans-serif; font-size: 0.78rem; letter-spacing: 0.12em; color: rgba(253,246,238,0.38); } .contact-line a { color: var(--gold-light); text-decoration: none; transition: color 0.2s; } .contact-line a:hover { color: var(--gold); } /* ═══════════════════════════════════════════════ VENDOR CTA STRIP ═══════════════════════════════════════════════ */ .vendor-strip { border: 1px solid rgba(201,168,76,0.18); background: rgba(201,168,76,0.04); padding: 1.2rem 2rem; max-width: 520px; width: 100%; margin-top: 1.5rem; animation: fadeUp 1.2s 1.3s cubic-bezier(.22,1,.36,1) both; } .vendor-strip p { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--cream-dim); font-style: italic; margin-bottom: 0.8rem; letter-spacing: 0.04em; } .vendor-email { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold); } .vendor-email a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.3); padding-bottom: 1px; transition: border-color 0.2s; } .vendor-email a:hover { border-color: var(--gold); } /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ footer { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; padding: 0.9rem; font-family: 'Cormorant Garamond', serif; font-size: 0.72rem; color: rgba(253,246,238,0.22); letter-spacing: 0.18em; z-index: 2; background: linear-gradient(transparent, rgba(12,4,4,0.6)); } /* ═══════════════════════════════════════════════ UTILITY ANIMATION ═══════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════ */ @media (max-width: 600px) { .logo-svg { width: 160px; height: 160px; } .cd-box { width: 66px; height: 66px; } .cd-sep { font-size: 1.6rem; } .signup-btn { padding: 0.8rem 1rem; font-size: 0.62rem; letter-spacing: 0.14em; } .corner { width: 60px; height: 60px; } .vendor-strip { padding: 1rem 1.2rem; } footer { font-size: 0.62rem; letter-spacing: 0.1em; } } @media (max-width: 380px) { .cd-box { width: 56px; height: 56px; } .cd-sep { display: none; } }

RADHA RANI

FASHION MALL

A curated marketplace for artisan vendors — bangles, artificial jewellery,
fabrics & bridal wear. Empowering small businesses, one stall at a time.

✦ COMING SOON ✦

DAYS

HOURS

MINUTES

SECONDS

✦ Artificial Jewellery

✦ Bangles & Chooda

✦ Ethnic Fabrics

✦ Hair Accessories

✦ Bridal Collections

✦ Fashion Accessories

✦ Platform for Small Vendors

For enquiries: info@radharanifashionmall.com

Gurugram, Haryana, India

Are you a vendor looking to list your products?

Write to us at info@radharanifashionmall.com