| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AURA — Fine Jewellery</title> |
| <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=Josefin+Sans:wght@200;300;400&display=swap" rel="stylesheet"> |
| <style> |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| :root { |
| --gold: #C9A84C; |
| --gold-light: #E8CC7A; |
| --gold-pale: #F5E8BF; |
| --gold-dark: #8B6914; |
| --black: #0A0A0A; |
| --black-soft: #111111; |
| --black-mid: #1A1A1A; |
| --black-card: #141414; |
| --white: #FAF7F2; |
| --white-dim: #D4CFC8; |
| --cream: #F0E6D3; |
| --border: rgba(201,168,76,0.25); |
| --border-bright: rgba(201,168,76,0.6); |
| } |
| |
| html { scroll-behavior: smooth; } |
| |
| body { |
| background: var(--black); |
| color: var(--white); |
| font-family: 'Josefin Sans', sans-serif; |
| font-weight: 300; |
| letter-spacing: 0.04em; |
| cursor: none; |
| overflow-x: hidden; |
| } |
| |
| |
| #cursor { |
| position: fixed; width: 10px; height: 10px; |
| background: var(--gold); border-radius: 50%; |
| pointer-events: none; z-index: 9999; |
| transform: translate(-50%, -50%); |
| transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s; |
| mix-blend-mode: screen; |
| } |
| #cursor-ring { |
| position: fixed; width: 38px; height: 38px; |
| border: 1px solid rgba(201,168,76,0.5); |
| border-radius: 50%; pointer-events: none; z-index: 9998; |
| transform: translate(-50%, -50%); |
| transition: all 0.18s ease; |
| } |
| body.hover-active #cursor { width: 16px; height: 16px; background: var(--gold-light); } |
| body.hover-active #cursor-ring { width: 56px; height: 56px; border-color: var(--gold); } |
| |
| |
| body::before { |
| content: ''; |
| position: fixed; inset: 0; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); |
| opacity: 0.025; pointer-events: none; z-index: 1000; |
| } |
| |
| |
| nav { |
| position: fixed; top: 0; left: 0; right: 0; z-index: 500; |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 28px 60px; |
| border-bottom: 1px solid transparent; |
| transition: all 0.5s ease; |
| } |
| nav.scrolled { |
| background: rgba(10,10,10,0.92); |
| backdrop-filter: blur(20px); |
| border-bottom-color: var(--border); |
| padding: 18px 60px; |
| } |
| .nav-logo { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: 28px; font-weight: 300; letter-spacing: 0.3em; |
| color: var(--gold-light); |
| text-transform: uppercase; text-decoration: none; |
| } |
| .nav-logo span { color: var(--white); } |
| .nav-links { display: flex; gap: 48px; list-style: none; } |
| .nav-links a { |
| color: var(--white-dim); text-decoration: none; |
| font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; |
| transition: color 0.3s; |
| position: relative; |
| } |
| .nav-links a::after { |
| content: ''; position: absolute; bottom: -4px; left: 0; right: 0; |
| height: 1px; background: var(--gold); |
| transform: scaleX(0); transform-origin: right; |
| transition: transform 0.4s ease; |
| } |
| .nav-links a:hover { color: var(--gold-light); } |
| .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } |
| .nav-actions { display: flex; align-items: center; gap: 24px; } |
| .nav-icon { color: var(--white-dim); font-size: 18px; text-decoration: none; transition: color 0.3s; cursor: none; } |
| .nav-icon:hover { color: var(--gold); } |
| |
| |
| .hero { |
| min-height: 100vh; display: flex; align-items: center; |
| position: relative; overflow: hidden; |
| padding: 140px 60px 80px; |
| } |
| .hero-bg { |
| position: absolute; inset: 0; |
| background: radial-gradient(ellipse 70% 80% at 70% 50%, rgba(139,105,20,0.12) 0%, transparent 70%), |
| radial-gradient(ellipse 40% 50% at 20% 80%, rgba(201,168,76,0.05) 0%, transparent 60%); |
| } |
| .hero-lines { |
| position: absolute; inset: 0; overflow: hidden; pointer-events: none; |
| } |
| .hero-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; } |
| .hero-content { position: relative; z-index: 2; max-width: 650px; } |
| .hero-badge { |
| display: inline-flex; align-items: center; gap: 12px; |
| margin-bottom: 40px; |
| font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); |
| } |
| .hero-badge::before, .hero-badge::after { |
| content: ''; display: block; width: 40px; height: 1px; background: var(--gold-dark); |
| } |
| .hero h1 { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: clamp(64px, 8vw, 112px); font-weight: 300; |
| line-height: 1.0; letter-spacing: -0.01em; |
| margin-bottom: 32px; color: var(--white); |
| } |
| .hero h1 em { font-style: italic; color: var(--gold-light); } |
| .hero p { |
| font-size: 13px; letter-spacing: 0.1em; line-height: 2; |
| color: var(--white-dim); max-width: 420px; margin-bottom: 56px; |
| } |
| .hero-cta { display: flex; align-items: center; gap: 32px; } |
| .btn-primary { |
| display: inline-flex; align-items: center; gap: 14px; |
| padding: 18px 48px; border: 1px solid var(--gold); |
| background: transparent; color: var(--gold-light); |
| font-family: 'Josefin Sans', sans-serif; |
| font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; |
| text-decoration: none; cursor: none; |
| transition: all 0.4s ease; position: relative; overflow: hidden; |
| } |
| .btn-primary::before { |
| content: ''; position: absolute; inset: 0; |
| background: var(--gold); transform: translateX(-101%); |
| transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); |
| } |
| .btn-primary:hover::before { transform: translateX(0); } |
| .btn-primary:hover { color: var(--black); } |
| .btn-primary span { position: relative; z-index: 1; } |
| .btn-link { |
| font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; |
| color: var(--white-dim); text-decoration: none; cursor: none; |
| transition: color 0.3s; |
| } |
| .btn-link:hover { color: var(--gold-light); } |
| |
| .hero-visual { |
| position: absolute; right: -20px; top: 50%; |
| transform: translateY(-50%); |
| width: 45vw; max-width: 700px; |
| opacity: 0.85; |
| } |
| .hero-visual svg { width: 100%; height: auto; } |
| |
| |
| .marquee-section { |
| border-top: 1px solid var(--border); |
| border-bottom: 1px solid var(--border); |
| padding: 20px 0; overflow: hidden; background: var(--black-soft); |
| } |
| .marquee-track { |
| display: flex; width: max-content; |
| animation: marquee 28s linear infinite; |
| } |
| .marquee-item { |
| display: flex; align-items: center; gap: 36px; |
| padding: 0 36px; white-space: nowrap; |
| font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-dark); |
| } |
| .marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.5; } |
| @keyframes marquee { to { transform: translateX(-50%); } } |
| |
| |
| .section { padding: 120px 60px; } |
| .section-header { margin-bottom: 72px; } |
| .section-label { |
| font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; |
| color: var(--gold); margin-bottom: 16px; display: block; |
| } |
| .section-title { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: clamp(36px, 4vw, 56px); font-weight: 300; |
| line-height: 1.15; color: var(--white); |
| } |
| .section-title em { font-style: italic; color: var(--gold-light); } |
| |
| .categories-grid { |
| display: grid; |
| grid-template-columns: 2fr 1fr 1fr; |
| grid-template-rows: auto auto; |
| gap: 2px; |
| } |
| .cat-card { |
| position: relative; overflow: hidden; |
| cursor: none; |
| background: var(--black-card); |
| } |
| .cat-card:first-child { grid-row: span 2; } |
| .cat-inner { |
| position: relative; height: 100%; |
| min-height: 320px; display: flex; flex-direction: column; |
| justify-content: flex-end; padding: 40px; |
| overflow: hidden; |
| } |
| .cat-card:first-child .cat-inner { min-height: 640px; } |
| .cat-bg { |
| position: absolute; inset: 0; |
| display: flex; align-items: center; justify-content: center; |
| transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); |
| } |
| .cat-card:hover .cat-bg { transform: scale(1.08); } |
| .cat-bg svg { width: 100%; height: 100%; } |
| .cat-overlay { |
| position: absolute; inset: 0; |
| background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.1) 60%); |
| } |
| .cat-content { position: relative; z-index: 2; } |
| .cat-tag { |
| font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; |
| color: var(--gold); margin-bottom: 10px; display: block; |
| } |
| .cat-name { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: 32px; font-weight: 300; color: var(--white); |
| margin-bottom: 16px; |
| } |
| .cat-card:first-child .cat-name { font-size: 48px; } |
| .cat-count { |
| font-size: 10px; letter-spacing: 0.2em; color: var(--white-dim); |
| display: flex; align-items: center; gap: 12px; |
| } |
| .cat-count::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold-dark); } |
| |
| |
| .products-grid { |
| display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; |
| } |
| .product-card { |
| background: var(--black-card); cursor: none; |
| position: relative; overflow: hidden; |
| transition: background 0.3s; |
| } |
| .product-card:hover { background: var(--black-mid); } |
| .product-img { |
| aspect-ratio: 3/4; display: flex; align-items: center; |
| justify-content: center; position: relative; overflow: hidden; |
| background: var(--black-soft); |
| } |
| .product-img svg { width: 70%; height: 70%; transition: transform 0.6s ease; } |
| .product-card:hover .product-img svg { transform: scale(1.08) rotate(2deg); } |
| .product-badge { |
| position: absolute; top: 20px; left: 20px; |
| background: var(--gold); color: var(--black); |
| font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; |
| padding: 4px 12px; |
| } |
| .product-info { padding: 28px 28px 32px; } |
| .product-category { |
| font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; |
| color: var(--gold-dark); margin-bottom: 8px; |
| } |
| .product-name { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: 22px; font-weight: 400; color: var(--white); |
| margin-bottom: 12px; line-height: 1.3; |
| } |
| .product-footer { display: flex; justify-content: space-between; align-items: center; } |
| .product-price { font-size: 13px; color: var(--gold-light); letter-spacing: 0.05em; } |
| .product-add { |
| width: 40px; height: 40px; border: 1px solid var(--border); |
| display: flex; align-items: center; justify-content: center; |
| color: var(--gold); font-size: 20px; cursor: none; |
| transition: all 0.3s; background: transparent; |
| } |
| .product-add:hover { background: var(--gold); color: var(--black); border-color: var(--gold); } |
| |
| |
| .materials-section { |
| background: var(--black-soft); |
| border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); |
| } |
| .materials-inner { |
| display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; |
| } |
| .materials-text .section-title { margin-bottom: 28px; } |
| .materials-text p { |
| font-size: 13px; line-height: 2.2; color: var(--white-dim); |
| margin-bottom: 48px; letter-spacing: 0.05em; |
| } |
| .material-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; } |
| .pill { |
| padding: 8px 22px; border: 1px solid var(--border); |
| font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; |
| color: var(--white-dim); transition: all 0.3s; cursor: none; |
| } |
| .pill:hover, .pill.active { border-color: var(--gold); color: var(--gold-light); } |
| .materials-visual { display: flex; justify-content: center; align-items: center; } |
| |
| |
| .values-strip { |
| display: grid; grid-template-columns: repeat(4, 1fr); |
| border-top: 1px solid var(--border); |
| } |
| .value-item { |
| padding: 56px 40px; |
| border-right: 1px solid var(--border); |
| text-align: center; |
| transition: background 0.3s; |
| cursor: none; |
| } |
| .value-item:last-child { border-right: none; } |
| .value-item:hover { background: rgba(201,168,76,0.04); } |
| .value-icon { margin-bottom: 20px; } |
| .value-icon svg { width: 36px; height: 36px; } |
| .value-title { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: 20px; font-weight: 400; color: var(--gold-light); |
| margin-bottom: 10px; |
| } |
| .value-text { font-size: 11px; color: var(--white-dim); line-height: 1.9; letter-spacing: 0.05em; } |
| |
| |
| .testimonial-section { |
| text-align: center; padding: 120px 60px; |
| background: var(--black-mid); |
| border-top: 1px solid var(--border); |
| } |
| .testimonial-quote { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: clamp(28px, 3.5vw, 48px); font-weight: 300; |
| font-style: italic; line-height: 1.5; |
| color: var(--white); max-width: 820px; margin: 0 auto 40px; |
| } |
| .testimonial-quote em { color: var(--gold-light); font-style: normal; } |
| .testimonial-author { font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-dark); } |
| .quote-mark { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: 120px; color: var(--gold-dark); opacity: 0.3; |
| line-height: 0.8; display: block; margin-bottom: 24px; |
| } |
| |
| |
| .newsletter-section { |
| padding: 100px 60px; border-top: 1px solid var(--border); |
| display: flex; align-items: center; justify-content: space-between; gap: 60px; |
| } |
| .newsletter-text .section-title { font-size: 40px; } |
| .newsletter-text p { font-size: 13px; color: var(--white-dim); margin-top: 16px; letter-spacing: 0.05em; line-height: 1.9; } |
| .newsletter-form { display: flex; gap: 0; flex: 0 0 480px; } |
| .newsletter-input { |
| flex: 1; padding: 18px 24px; |
| background: var(--black-mid); border: 1px solid var(--border); |
| border-right: none; color: var(--white); |
| font-family: 'Josefin Sans', sans-serif; |
| font-size: 12px; letter-spacing: 0.1em; outline: none; |
| transition: border-color 0.3s; |
| } |
| .newsletter-input::placeholder { color: var(--white-dim); opacity: 0.5; } |
| .newsletter-input:focus { border-color: var(--gold); } |
| .newsletter-btn { |
| padding: 18px 32px; background: var(--gold); |
| border: 1px solid var(--gold); color: var(--black); |
| font-family: 'Josefin Sans', sans-serif; |
| font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; |
| cursor: none; transition: background 0.3s, color 0.3s; |
| } |
| .newsletter-btn:hover { background: var(--gold-light); } |
| |
| |
| footer { |
| background: var(--black-soft); border-top: 1px solid var(--border); |
| padding: 80px 60px 40px; |
| } |
| .footer-top { |
| display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; |
| gap: 60px; margin-bottom: 60px; |
| } |
| .footer-brand { } |
| .footer-logo { |
| font-family: 'Cormorant Garamond', serif; |
| font-size: 32px; font-weight: 300; letter-spacing: 0.3em; |
| color: var(--gold-light); display: block; margin-bottom: 20px; |
| } |
| .footer-tagline { font-size: 11px; color: var(--white-dim); line-height: 2; max-width: 260px; } |
| .footer-col h4 { |
| font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; |
| color: var(--gold); margin-bottom: 24px; |
| } |
| .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } |
| .footer-col a { |
| font-size: 12px; color: var(--white-dim); text-decoration: none; |
| letter-spacing: 0.08em; transition: color 0.3s; |
| } |
| .footer-col a:hover { color: var(--gold-light); } |
| .footer-bottom { |
| border-top: 1px solid var(--border); padding-top: 28px; |
| display: flex; justify-content: space-between; align-items: center; |
| } |
| .footer-copy { font-size: 10px; color: var(--gold-dark); letter-spacing: 0.2em; } |
| .footer-socials { display: flex; gap: 24px; } |
| .footer-socials a { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white-dim); text-decoration: none; transition: color 0.3s; } |
| .footer-socials a:hover { color: var(--gold); } |
| |
| |
| .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; } |
| |
| |
| #gems-canvas { |
| position: fixed; inset: 0; pointer-events: none; z-index: 0; |
| opacity: 0.6; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div id="cursor"></div> |
| <div id="cursor-ring"></div> |
| <canvas id="gems-canvas"></canvas> |
|
|
| |
| <nav id="navbar"> |
| <a href="#" class="nav-logo">AURA<span>.</span></a> |
| <ul class="nav-links"> |
| <li><a href="#collections">Collections</a></li> |
| <li><a href="#craftsmanship">Craftsmanship</a></li> |
| <li><a href="#bespoke">Bespoke</a></li> |
| <li><a href="#atelier">Atelier</a></li> |
| </ul> |
| <div class="nav-actions"> |
| <a href="#" class="nav-icon" title="Search">⌕</a> |
| <a href="#" class="nav-icon" title="Wishlist">♡</a> |
| <a href="#" class="nav-icon" title="Bag">◻</a> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="hero-bg"></div> |
| <div class="hero-lines"> |
| <svg viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice"> |
| <defs> |
| <radialGradient id="glow1" cx="50%" cy="50%"> |
| <stop offset="0%" stop-color="#C9A84C" stop-opacity="0.15"/> |
| <stop offset="100%" stop-color="#C9A84C" stop-opacity="0"/> |
| </radialGradient> |
| </defs> |
| <circle cx="1050" cy="450" r="320" fill="url(#glow1)"/> |
| <line x1="0" y1="900" x2="1400" y2="0" stroke="#C9A84C" stroke-width="0.3" opacity="0.15"/> |
| <line x1="700" y1="0" x2="700" y2="900" stroke="#C9A84C" stroke-width="0.3" opacity="0.1"/> |
| </svg> |
| </div> |
| <div class="hero-content reveal"> |
| <div class="hero-badge">New Collection 2025</div> |
| <h1>Worn<br>by the <em>Bold.</em><br>Made for<br>the Rare.</h1> |
| <p>Handcrafted fine jewellery using ethically sourced gemstones and precious metals. Each piece tells a singular story.</p> |
| <div class="hero-cta"> |
| <a href="#collections" class="btn-primary"><span>Explore Collection</span> <span>→</span></a> |
| <a href="#bespoke" class="btn-link">Bespoke Creation</a> |
| </div> |
| </div> |
| <div class="hero-visual"> |
| <svg viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <radialGradient id="gemGrad" cx="35%" cy="30%"> |
| <stop offset="0%" stop-color="#F5E8BF"/> |
| <stop offset="40%" stop-color="#C9A84C"/> |
| <stop offset="100%" stop-color="#3D2C08"/> |
| </radialGradient> |
| <radialGradient id="gemGrad2" cx="35%" cy="30%"> |
| <stop offset="0%" stop-color="#E8F4FF"/> |
| <stop offset="40%" stop-color="#7BAED4"/> |
| <stop offset="100%" stop-color="#1A3A52"/> |
| </radialGradient> |
| <radialGradient id="rubyGrad" cx="35%" cy="30%"> |
| <stop offset="0%" stop-color="#FFD4D4"/> |
| <stop offset="40%" stop-color="#C94C4C"/> |
| <stop offset="100%" stop-color="#3D0808"/> |
| </radialGradient> |
| <filter id="glow"> |
| <feGaussianBlur stdDeviation="3" result="blur"/> |
| <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge> |
| </filter> |
| </defs> |
| |
| <ellipse cx="300" cy="360" rx="180" ry="48" fill="none" stroke="#C9A84C" stroke-width="22" opacity="0.9"/> |
| <ellipse cx="300" cy="360" rx="180" ry="48" fill="none" stroke="#F5E8BF" stroke-width="2" opacity="0.5"/> |
| |
| <ellipse cx="300" cy="360" rx="158" ry="34" fill="none" stroke="#8B6914" stroke-width="1" opacity="0.6"/> |
| |
| <polygon points="300,270 340,320 320,360 280,360 260,320" fill="url(#gemGrad)" filter="url(#glow)"/> |
| <polygon points="300,270 340,320 300,290" fill="#F5E8BF" opacity="0.4"/> |
| <polygon points="300,270 260,320 300,290" fill="#E8CC7A" opacity="0.3"/> |
| <line x1="300" y1="270" x2="300" y2="360" stroke="#FAF7F2" stroke-width="0.5" opacity="0.3"/> |
| |
| <polygon points="215,345 230,330 245,345 230,360" fill="url(#gemGrad2)" opacity="0.85"/> |
| <polygon points="215,345 230,330 222,352" fill="white" opacity="0.25"/> |
| <polygon points="355,345 370,330 385,345 370,360" fill="url(#gemGrad2)" opacity="0.85"/> |
| <polygon points="355,345 370,330 362,352" fill="white" opacity="0.25"/> |
| |
| <circle cx="162" cy="358" r="7" fill="url(#rubyGrad)" opacity="0.8"/> |
| <circle cx="438" cy="358" r="7" fill="url(#rubyGrad)" opacity="0.8"/> |
| |
| <polygon points="150,200 160,185 170,200 160,215" fill="url(#gemGrad)" opacity="0.6"/> |
| <polygon points="430,150 440,135 450,150 440,165" fill="url(#gemGrad2)" opacity="0.5"/> |
| <circle cx="100" cy="480" r="9" fill="url(#rubyGrad)" opacity="0.4"/> |
| <polygon points="490,500 500,485 510,500 500,515" fill="url(#gemGrad)" opacity="0.4"/> |
| <circle cx="480" cy="250" r="6" fill="#C9A84C" opacity="0.4"/> |
| <circle cx="130" cy="300" r="5" fill="#C9A84C" opacity="0.3"/> |
| |
| <path d="M200,180 Q300,120 400,180" fill="none" stroke="#C9A84C" stroke-width="0.8" opacity="0.2"/> |
| <path d="M180,560 Q300,620 420,560" fill="none" stroke="#C9A84C" stroke-width="0.8" opacity="0.2"/> |
| |
| <circle cx="240" cy="240" r="2" fill="#C9A84C" opacity="0.5"/> |
| <circle cx="370" cy="230" r="1.5" fill="#C9A84C" opacity="0.4"/> |
| <circle cx="185" cy="410" r="1.5" fill="#C9A84C" opacity="0.4"/> |
| <circle cx="415" cy="420" r="2" fill="#C9A84C" opacity="0.5"/> |
| <circle cx="320" cy="480" r="1.5" fill="#E8CC7A" opacity="0.5"/> |
| <circle cx="260" cy="490" r="1" fill="#E8CC7A" opacity="0.4"/> |
| </svg> |
| </div> |
| </section> |
|
|
| |
| <div class="marquee-section"> |
| <div class="marquee-track"> |
| <div class="marquee-item"><span class="marquee-dot"></span> 18 Karat Gold</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Conflict-Free Diamonds</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Handcrafted Artisanship</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> GIA Certified Stones</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Bespoke Commissions</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Lifetime Guarantee</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Free Engraving</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> White Glove Delivery</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> 18 Karat Gold</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Conflict-Free Diamonds</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Handcrafted Artisanship</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> GIA Certified Stones</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Bespoke Commissions</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Lifetime Guarantee</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> Free Engraving</div> |
| <div class="marquee-item"><span class="marquee-dot"></span> White Glove Delivery</div> |
| </div> |
| </div> |
|
|
| |
| <section class="section" id="collections"> |
| <div class="section-header reveal"> |
| <span class="section-label">Explore</span> |
| <h2 class="section-title">Our <em>Collections</em></h2> |
| </div> |
| <div class="categories-grid"> |
| <div class="cat-card reveal"> |
| <div class="cat-inner"> |
| <div class="cat-bg"> |
| <svg viewBox="0 0 500 640" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="500" height="640" fill="#0E0D0A"/> |
| <circle cx="250" cy="280" r="200" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.2"/> |
| <circle cx="250" cy="280" r="140" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.15"/> |
| |
| <path d="M250,120 L250,240" stroke="#C9A84C" stroke-width="3" fill="none"/> |
| <ellipse cx="250" cy="118" rx="60" ry="12" fill="none" stroke="#C9A84C" stroke-width="3"/> |
| <polygon points="250,240 278,290 250,310 222,290" fill="#C9A84C"/> |
| <polygon points="250,240 278,290 250,265" fill="#F5E8BF" opacity="0.5"/> |
| <circle cx="250" cy="310" r="8" fill="#7BAED4"/> |
| <polygon points="250,200 258,215 250,208" fill="#F5E8BF" opacity="0.3"/> |
| |
| <g opacity="0.12" stroke="#C9A84C" stroke-width="0.5"> |
| <line x1="250" y1="80" x2="250" y2="0"/> |
| <line x1="250" y1="480" x2="250" y2="640"/> |
| <line x1="80" y1="280" x2="0" y2="280"/> |
| <line x1="420" y1="280" x2="500" y2="280"/> |
| </g> |
| </svg> |
| </div> |
| <div class="cat-overlay"></div> |
| <div class="cat-content"> |
| <span class="cat-tag">Collection 01</span> |
| <h3 class="cat-name">Necklaces & Pendants</h3> |
| <span class="cat-count">42 pieces</span> |
| </div> |
| </div> |
| </div> |
| <div class="cat-card reveal reveal-delay-1"> |
| <div class="cat-inner"> |
| <div class="cat-bg"> |
| <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="400" height="320" fill="#0C0B08"/> |
| <ellipse cx="200" cy="160" rx="130" ry="38" fill="none" stroke="#C9A84C" stroke-width="18" opacity="0.9"/> |
| <ellipse cx="200" cy="160" rx="130" ry="38" fill="none" stroke="#F5E8BF" stroke-width="1" opacity="0.4"/> |
| <polygon points="200,90 218,122 200,106" fill="#C94C4C" opacity="0.7"/> |
| <polygon points="200,90 182,122 200,106" fill="#FF8080" opacity="0.4"/> |
| <circle cx="90" cy="158" r="7" fill="#7BAED4" opacity="0.8"/> |
| <circle cx="310" cy="158" r="7" fill="#7BAED4" opacity="0.8"/> |
| </svg> |
| </div> |
| <div class="cat-overlay"></div> |
| <div class="cat-content"> |
| <span class="cat-tag">Collection 02</span> |
| <h3 class="cat-name">Rings</h3> |
| <span class="cat-count">68 pieces</span> |
| </div> |
| </div> |
| </div> |
| <div class="cat-card reveal reveal-delay-2"> |
| <div class="cat-inner"> |
| <div class="cat-bg"> |
| <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="400" height="320" fill="#0C0B08"/> |
| |
| <path d="M150,60 L150,180" stroke="#C9A84C" stroke-width="2.5" fill="none"/> |
| <circle cx="150" cy="55" r="10" fill="none" stroke="#C9A84C" stroke-width="2.5"/> |
| <polygon points="150,180 165,215 150,230 135,215" fill="#C9A84C"/> |
| <circle cx="150" cy="230" r="8" fill="#7BAED4"/> |
| <path d="M250,60 L250,180" stroke="#C9A84C" stroke-width="2.5" fill="none"/> |
| <circle cx="250" cy="55" r="10" fill="none" stroke="#C9A84C" stroke-width="2.5"/> |
| <polygon points="250,180 265,215 250,230 235,215" fill="#C9A84C"/> |
| <circle cx="250" cy="230" r="8" fill="#7BAED4"/> |
| </svg> |
| </div> |
| <div class="cat-overlay"></div> |
| <div class="cat-content"> |
| <span class="cat-tag">Collection 03</span> |
| <h3 class="cat-name">Earrings</h3> |
| <span class="cat-count">54 pieces</span> |
| </div> |
| </div> |
| </div> |
| <div class="cat-card reveal reveal-delay-1"> |
| <div class="cat-inner"> |
| <div class="cat-bg"> |
| <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="400" height="320" fill="#0C0B08"/> |
| |
| <path d="M100,160 Q200,100 300,160 Q200,220 100,160" fill="none" stroke="#C9A84C" stroke-width="14" opacity="0.9"/> |
| <path d="M100,160 Q200,100 300,160 Q200,220 100,160" fill="none" stroke="#F5E8BF" stroke-width="1" opacity="0.4"/> |
| <circle cx="200" cy="116" r="10" fill="#C94C4C" opacity="0.9"/> |
| <circle cx="148" cy="132" r="7" fill="#7BAED4" opacity="0.8"/> |
| <circle cx="252" cy="132" r="7" fill="#7BAED4" opacity="0.8"/> |
| <circle cx="200" cy="204" r="10" fill="#C9A84C" opacity="0.9"/> |
| </svg> |
| </div> |
| <div class="cat-overlay"></div> |
| <div class="cat-content"> |
| <span class="cat-tag">Collection 04</span> |
| <h3 class="cat-name">Bracelets</h3> |
| <span class="cat-count">31 pieces</span> |
| </div> |
| </div> |
| </div> |
| <div class="cat-card reveal reveal-delay-2"> |
| <div class="cat-inner"> |
| <div class="cat-bg"> |
| <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="400" height="320" fill="#0C0B08"/> |
| |
| <polygon points="200,80 214,126 262,126 224,154 238,200 200,172 162,200 176,154 138,126 186,126" fill="none" stroke="#C9A84C" stroke-width="2" opacity="0.9"/> |
| <polygon points="200,80 214,126 262,126 224,154 238,200 200,172 162,200 176,154 138,126 186,126" fill="#C9A84C" opacity="0.08"/> |
| <circle cx="200" cy="150" r="22" fill="url(#gemGrad)" opacity="0.9"/> |
| <circle cx="200" cy="150" r="14" fill="#F5E8BF" opacity="0.3"/> |
| |
| <circle cx="200" cy="82" r="4" fill="#E8CC7A"/> |
| <circle cx="261" cy="127" r="3" fill="#E8CC7A"/> |
| <circle cx="237" cy="199" r="3" fill="#E8CC7A"/> |
| <circle cx="163" cy="199" r="3" fill="#E8CC7A"/> |
| <circle cx="139" cy="127" r="3" fill="#E8CC7A"/> |
| </svg> |
| </div> |
| <div class="cat-overlay"></div> |
| <div class="cat-content"> |
| <span class="cat-tag">Collection 05</span> |
| <h3 class="cat-name">Brooches</h3> |
| <span class="cat-count">18 pieces</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section" style="padding-top: 0;"> |
| <div class="section-header reveal"> |
| <span class="section-label">Featured</span> |
| <h2 class="section-title">Selected <em>Pieces</em></h2> |
| </div> |
| <div class="products-grid"> |
| <div class="product-card reveal"> |
| <div class="product-img"> |
| <div class="product-badge">New</div> |
| <svg viewBox="0 0 300 380" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="300" height="380" fill="#0E0D0A"/> |
| <defs> |
| <radialGradient id="d1" cx="35%" cy="30%"><stop offset="0%" stop-color="#FFF9ED"/><stop offset="50%" stop-color="#C9A84C"/><stop offset="100%" stop-color="#3D2C08"/></radialGradient> |
| </defs> |
| <circle cx="150" cy="170" r="110" fill="none" stroke="#C9A84C" stroke-width="18"/> |
| <circle cx="150" cy="170" r="91" fill="none" stroke="#8B6914" stroke-width="0.8" opacity="0.5"/> |
| <polygon points="150,90 165,135 150,118" fill="#FFF9ED" opacity="0.3"/> |
| <polygon points="150,90 135,135 150,118" fill="#E8CC7A" opacity="0.2"/> |
| <circle cx="150" cy="170" r="28" fill="url(#d1)"/> |
| <circle cx="150" cy="170" r="18" fill="#FFF9ED" opacity="0.2"/> |
| <circle cx="82" cy="148" r="8" fill="#7BAED4"/> |
| <circle cx="218" cy="148" r="8" fill="#7BAED4"/> |
| <circle cx="150" cy="82" r="8" fill="#C94C4C"/> |
| <circle cx="82" cy="192" r="6" fill="#C9A84C"/> |
| <circle cx="218" cy="192" r="6" fill="#C9A84C"/> |
| </svg> |
| </div> |
| <div class="product-info"> |
| <span class="product-category">Ring</span> |
| <h3 class="product-name">Soleil Diamond Solitaire</h3> |
| <div class="product-footer"> |
| <span class="product-price">PKR 485,000</span> |
| <button class="product-add">+</button> |
| </div> |
| </div> |
| </div> |
| <div class="product-card reveal reveal-delay-1"> |
| <div class="product-img"> |
| <svg viewBox="0 0 300 380" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="300" height="380" fill="#0E0D0A"/> |
| <path d="M150,60 L150,220" stroke="#C9A84C" stroke-width="3" fill="none"/> |
| <ellipse cx="150" cy="57" rx="50" ry="10" fill="none" stroke="#C9A84C" stroke-width="3"/> |
| <polygon points="150,220 180,270 150,295 120,270" fill="#C9A84C"/> |
| <polygon points="150,220 180,270 150,248" fill="#FFF9ED" opacity="0.45"/> |
| <circle cx="150" cy="295" r="12" fill="#7BAED4"/> |
| <circle cx="150" cy="295" r="7" fill="#B8D9F0" opacity="0.5"/> |
| <circle cx="120" cy="150" r="5" fill="#C9A84C" opacity="0.5"/> |
| <circle cx="180" cy="150" r="5" fill="#C9A84C" opacity="0.5"/> |
| <circle cx="150" cy="140" r="4" fill="#E8CC7A" opacity="0.4"/> |
| </svg> |
| </div> |
| <div class="product-info"> |
| <span class="product-category">Pendant</span> |
| <h3 class="product-name">Lune Sapphire Drop</h3> |
| <div class="product-footer"> |
| <span class="product-price">PKR 228,000</span> |
| <button class="product-add">+</button> |
| </div> |
| </div> |
| </div> |
| <div class="product-card reveal reveal-delay-2"> |
| <div class="product-img"> |
| <div class="product-badge" style="background:var(--black); color:var(--gold); border:1px solid var(--gold);">Limited</div> |
| <svg viewBox="0 0 300 380" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="300" height="380" fill="#0E0D0A"/> |
| <path d="M80,190 Q150,130 220,190 Q150,250 80,190" fill="none" stroke="#C9A84C" stroke-width="18"/> |
| <path d="M80,190 Q150,130 220,190 Q150,250 80,190" fill="none" stroke="#F5E8BF" stroke-width="1" opacity="0.3"/> |
| <circle cx="150" cy="148" r="12" fill="#C94C4C"/> |
| <circle cx="150" cy="148" r="6" fill="#FFB0B0" opacity="0.5"/> |
| <circle cx="110" cy="162" r="8" fill="#C9A84C"/> |
| <circle cx="190" cy="162" r="8" fill="#C9A84C"/> |
| <circle cx="110" cy="218" r="8" fill="#C9A84C"/> |
| <circle cx="190" cy="218" r="8" fill="#C9A84C"/> |
| <circle cx="150" cy="232" r="10" fill="#7BAED4"/> |
| </svg> |
| </div> |
| <div class="product-info"> |
| <span class="product-category">Bracelet</span> |
| <h3 class="product-name">Celeste Ruby Cuff</h3> |
| <div class="product-footer"> |
| <span class="product-price">PKR 372,000</span> |
| <button class="product-add">+</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section materials-section" id="craftsmanship"> |
| <div class="materials-inner"> |
| <div class="materials-text reveal"> |
| <span class="section-label">Our Craft</span> |
| <h2 class="section-title">Forged in <em>Tradition,</em><br>Designed for<br>the Modern Age</h2> |
| <p>Every AURA piece passes through the hands of master craftspeople who carry generations of goldsmithing knowledge. We work only with 18-karat gold, platinum, and GIA-certified stones — because excellence tolerates no compromise.</p> |
| <div class="material-pills"> |
| <span class="pill active">18K Gold</span> |
| <span class="pill">Platinum</span> |
| <span class="pill">Rose Gold</span> |
| <span class="pill">White Gold</span> |
| <span class="pill">Diamonds</span> |
| <span class="pill">Sapphires</span> |
| <span class="pill">Rubies</span> |
| <span class="pill">Emeralds</span> |
| </div> |
| <a href="#atelier" class="btn-primary"><span>Visit Our Atelier</span> <span>→</span></a> |
| </div> |
| <div class="materials-visual reveal reveal-delay-2"> |
| <svg viewBox="0 0 420 520" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <radialGradient id="sphereGrad" cx="38%" cy="35%"> |
| <stop offset="0%" stop-color="#F5E8BF"/> |
| <stop offset="30%" stop-color="#C9A84C"/> |
| <stop offset="70%" stop-color="#8B6914"/> |
| <stop offset="100%" stop-color="#2A1E06"/> |
| </radialGradient> |
| </defs> |
| |
| <circle cx="210" cy="260" r="190" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.2" stroke-dasharray="4 8"/> |
| <circle cx="210" cy="260" r="160" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.15"/> |
| |
| <circle cx="210" cy="260" r="120" fill="url(#sphereGrad)"/> |
| <ellipse cx="175" cy="215" rx="40" ry="25" fill="white" opacity="0.12" transform="rotate(-20,175,215)"/> |
| |
| <line x1="210" y1="140" x2="210" y2="380" stroke="#3D2C08" stroke-width="0.8" opacity="0.5"/> |
| <line x1="90" y1="260" x2="330" y2="260" stroke="#3D2C08" stroke-width="0.8" opacity="0.5"/> |
| <ellipse cx="210" cy="260" rx="120" ry="40" fill="none" stroke="#3D2C08" stroke-width="0.8" opacity="0.4"/> |
| <ellipse cx="210" cy="260" rx="50" ry="120" fill="none" stroke="#3D2C08" stroke-width="0.8" opacity="0.4"/> |
| |
| <circle cx="210" cy="80" r="12" fill="#7BAED4" opacity="0.9"/> |
| <circle cx="210" cy="80" r="6" fill="white" opacity="0.3"/> |
| <circle cx="380" cy="340" r="9" fill="#C94C4C" opacity="0.9"/> |
| <circle cx="54" cy="180" r="7" fill="#C9A84C" opacity="0.8"/> |
| <circle cx="370" cy="170" r="5" fill="#E8CC7A" opacity="0.7"/> |
| <circle cx="60" cy="360" r="8" fill="#7BAED4" opacity="0.6"/> |
| |
| <line x1="210" y1="92" x2="210" y2="140" stroke="#C9A84C" stroke-width="0.5" opacity="0.3" stroke-dasharray="3 4"/> |
| <line x1="373" y1="334" x2="330" y2="300" stroke="#C94C4C" stroke-width="0.5" opacity="0.3" stroke-dasharray="3 4"/> |
| <line x1="60" y1="186" x2="92" y2="216" stroke="#C9A84C" stroke-width="0.5" opacity="0.3" stroke-dasharray="3 4"/> |
| </svg> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="values-strip"> |
| <div class="value-item reveal"> |
| <div class="value-icon"> |
| <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <circle cx="18" cy="18" r="14" stroke="#C9A84C" stroke-width="1"/> |
| <polygon points="18,8 21,15 29,15 23,20 25,28 18,23 11,28 13,20 7,15 15,15" fill="#C9A84C" opacity="0.85"/> |
| </svg> |
| </div> |
| <h4 class="value-title">Certified Stones</h4> |
| <p class="value-text">Every gemstone comes with GIA or IGI certification, ensuring authenticity and grade.</p> |
| </div> |
| <div class="value-item reveal reveal-delay-1"> |
| <div class="value-icon"> |
| <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M18 4 L20 12 L28 12 L22 17 L24 25 L18 20 L12 25 L14 17 L8 12 L16 12 Z" stroke="#C9A84C" stroke-width="1" fill="none"/> |
| <circle cx="18" cy="18" r="5" stroke="#C9A84C" stroke-width="0.8"/> |
| </svg> |
| </div> |
| <h4 class="value-title">Ethically Sourced</h4> |
| <p class="value-text">We partner only with Kimberley Process certified suppliers and fair-trade mines.</p> |
| </div> |
| <div class="value-item reveal reveal-delay-2"> |
| <div class="value-icon"> |
| <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <rect x="8" y="10" width="20" height="16" rx="2" stroke="#C9A84C" stroke-width="1"/> |
| <path d="M12 10 V8 Q18 4 24 8 V10" stroke="#C9A84C" stroke-width="1" fill="none"/> |
| <circle cx="18" cy="18" r="3" fill="#C9A84C" opacity="0.6"/> |
| </svg> |
| </div> |
| <h4 class="value-title">Free Engraving</h4> |
| <p class="value-text">Personalise any piece with a name, date, or message — included at no extra cost.</p> |
| </div> |
| <div class="value-item reveal reveal-delay-3"> |
| <div class="value-icon"> |
| <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M10 28 L10 16 L18 8 L26 16 L26 28" stroke="#C9A84C" stroke-width="1" fill="none"/> |
| <rect x="15" y="20" width="6" height="8" stroke="#C9A84C" stroke-width="0.8" fill="none"/> |
| <circle cx="18" cy="14" r="2" fill="#C9A84C" opacity="0.6"/> |
| </svg> |
| </div> |
| <h4 class="value-title">Lifetime Warranty</h4> |
| <p class="value-text">Every AURA piece is backed by a lifetime structural warranty and free annual cleaning.</p> |
| </div> |
| </div> |
|
|
| |
| <section class="testimonial-section reveal"> |
| <span class="quote-mark">"</span> |
| <p class="testimonial-quote">The ring was <em>more beautiful</em> in person than I could have imagined. The craftsmanship is extraordinary — every tiny detail speaks of genuine care and mastery.</p> |
| <p class="testimonial-author">— Nadia H., Lahore · Soleil Diamond Solitaire</p> |
| </section> |
|
|
| |
| <section class="newsletter-section reveal"> |
| <div class="newsletter-text"> |
| <span class="section-label">Stay in the loop</span> |
| <h2 class="section-title">First to know. <em>Always.</em></h2> |
| <p>Join our inner circle for early access to new collections, exclusive events, and private previews.</p> |
| </div> |
| <div> |
| <div class="newsletter-form"> |
| <input class="newsletter-input" type="email" placeholder="Your email address"> |
| <button class="newsletter-btn">Subscribe</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div class="footer-top"> |
| <div class="footer-brand"> |
| <span class="footer-logo">AURA.</span> |
| <p class="footer-tagline">Fine jewellery crafted with intention. Worn by those who understand that beauty is never accidental.</p> |
| </div> |
| <div class="footer-col"> |
| <h4>Collections</h4> |
| <ul> |
| <li><a href="#">Necklaces</a></li> |
| <li><a href="#">Rings</a></li> |
| <li><a href="#">Earrings</a></li> |
| <li><a href="#">Bracelets</a></li> |
| <li><a href="#">Brooches</a></li> |
| </ul> |
| </div> |
| <div class="footer-col"> |
| <h4>Services</h4> |
| <ul> |
| <li><a href="#">Bespoke Design</a></li> |
| <li><a href="#">Ring Sizing</a></li> |
| <li><a href="#">Engraving</a></li> |
| <li><a href="#">Repairs</a></li> |
| <li><a href="#">Appraisals</a></li> |
| </ul> |
| </div> |
| <div class="footer-col"> |
| <h4>Company</h4> |
| <ul> |
| <li><a href="#">Our Story</a></li> |
| <li><a href="#">Atelier</a></li> |
| <li><a href="#">Sustainability</a></li> |
| <li><a href="#">Careers</a></li> |
| <li><a href="#">Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="footer-bottom"> |
| <span class="footer-copy">© 2025 AURA Fine Jewellery. All rights reserved.</span> |
| <div class="footer-socials"> |
| <a href="#">Instagram</a> |
| <a href="#">Pinterest</a> |
| <a href="#">Facebook</a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const cursor = document.getElementById('cursor'); |
| const ring = document.getElementById('cursor-ring'); |
| let mx = 0, my = 0, rx = 0, ry = 0; |
| document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; }); |
| function animateCursor() { |
| rx += (mx - rx) * 0.15; |
| ry += (my - ry) * 0.15; |
| cursor.style.left = mx + 'px'; cursor.style.top = my + 'px'; |
| ring.style.left = rx + 'px'; ring.style.top = ry + 'px'; |
| requestAnimationFrame(animateCursor); |
| } |
| animateCursor(); |
| document.querySelectorAll('a, button, .cat-card, .product-card, .value-item, .pill').forEach(el => { |
| el.addEventListener('mouseenter', () => document.body.classList.add('hover-active')); |
| el.addEventListener('mouseleave', () => document.body.classList.remove('hover-active')); |
| }); |
| |
| |
| const navbar = document.getElementById('navbar'); |
| window.addEventListener('scroll', () => { |
| navbar.classList.toggle('scrolled', window.scrollY > 60); |
| }); |
| |
| |
| const reveals = document.querySelectorAll('.reveal'); |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } }); |
| }, { threshold: 0.12 }); |
| reveals.forEach(el => observer.observe(el)); |
| |
| |
| document.querySelectorAll('.pill').forEach(p => { |
| p.addEventListener('click', () => { |
| document.querySelectorAll('.pill').forEach(x => x.classList.remove('active')); |
| p.classList.add('active'); |
| }); |
| }); |
| |
| |
| const canvas = document.getElementById('gems-canvas'); |
| const ctx = canvas.getContext('2d'); |
| let W, H, gems; |
| function resize() { |
| W = canvas.width = window.innerWidth; |
| H = canvas.height = window.innerHeight; |
| } |
| function makeGem() { |
| const types = ['diamond','circle','hex']; |
| return { |
| x: Math.random() * W, y: Math.random() * H, |
| size: Math.random() * 5 + 2, |
| type: types[Math.floor(Math.random() * types.length)], |
| alpha: Math.random() * 0.3 + 0.05, |
| speed: Math.random() * 0.3 + 0.1, |
| drift: (Math.random() - 0.5) * 0.2, |
| color: Math.random() > 0.5 ? '#C9A84C' : (Math.random() > 0.5 ? '#7BAED4' : '#C94C4C') |
| }; |
| } |
| function initGems() { gems = Array.from({length: 55}, makeGem); } |
| function drawGem(g) { |
| ctx.save(); ctx.globalAlpha = g.alpha; |
| ctx.strokeStyle = g.color; ctx.fillStyle = g.color; ctx.lineWidth = 0.8; |
| if (g.type === 'diamond') { |
| ctx.beginPath(); |
| ctx.moveTo(g.x, g.y - g.size); |
| ctx.lineTo(g.x + g.size * 0.7, g.y); |
| ctx.lineTo(g.x, g.y + g.size); |
| ctx.lineTo(g.x - g.size * 0.7, g.y); |
| ctx.closePath(); ctx.stroke(); |
| } else if (g.type === 'circle') { |
| ctx.beginPath(); ctx.arc(g.x, g.y, g.size * 0.8, 0, Math.PI * 2); |
| ctx.stroke(); |
| } else { |
| ctx.beginPath(); |
| for (let i = 0; i < 6; i++) { |
| const angle = (Math.PI / 3) * i - Math.PI / 6; |
| const px = g.x + g.size * Math.cos(angle); |
| const py = g.y + g.size * Math.sin(angle); |
| i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py); |
| } |
| ctx.closePath(); ctx.stroke(); |
| } |
| ctx.restore(); |
| } |
| function animate() { |
| ctx.clearRect(0, 0, W, H); |
| gems.forEach(g => { |
| g.y -= g.speed; g.x += g.drift; |
| if (g.y < -20) { g.y = H + 20; g.x = Math.random() * W; } |
| drawGem(g); |
| }); |
| requestAnimationFrame(animate); |
| } |
| resize(); initGems(); animate(); |
| window.addEventListener('resize', () => { resize(); initGems(); }); |
| </script> |
| </body> |
| </html> |
