About us!

<!-- ============================================================
     VELORA JEWELS — ABOUT US
     Paste this whole block into a Custom Liquid section
     (Online Store > Themes > Customize > About page > Add section
      > Custom Liquid) — everything is self-contained and scoped
     under .va so it won't clash with your theme.
     Palette matched to the store: ivory, soft slate-grey, deep ink.
     ============================================================ -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">

<div class="va">

  <!-- HERO -->
  <header class="va-hero">
    <div class="va-hero__img" role="img" aria-label="Velora Jewels workshop in Mumbai"></div>
    <div class="va-hero__scrim"></div>
    <div class="va-hero__inner va-reveal">
      <span class="va-eyebrow va-eyebrow--light">Velora Jewels &middot; Ghatkopar East, Mumbai</span>
      <h1 class="va-hero__title">Real silver.<br>Real store.<br><em>Real people.</em></h1>
      <p class="va-hero__sub">Buying jewellery online shouldn&rsquo;t mean trusting a stranger. Behind every piece on this website is a real store you can walk into &mdash; and real people who&rsquo;ll know you by name.</p>
    </div>
  </header>

  <!-- THREAD / STORY -->
  <section class="va-story">
    <div class="va-thread" aria-hidden="true"></div>

    <article class="va-block va-reveal">
      <div class="va-block__text">
        <span class="va-eyebrow"><span class="va-dot"></span>Where it began</span>
        <h2>It started in Ghatkopar.</h2>
        <p>Velora isn&rsquo;t a faceless online label. Our home is a physical store in Ghatkopar East, Mumbai &mdash; where more than <strong>1,500 customers</strong> have walked in, tried on, and walked out wearing something they love.</p>
        <p>That store is our proof. Everything we sell online is the same jewellery we&rsquo;re proud to hand to a customer standing across the counter.</p>
      </div>
      <div class="va-block__media">
        <img loading="lazy" src="https://velorajewels.in/cdn/shop/files/2025-10-25.webp" alt="Velora Jewels store in Ghatkopar East, Mumbai">
      </div>
    </article>

    <article class="va-block va-block--reverse va-reveal">
      <div class="va-block__text">
        <span class="va-eyebrow"><span class="va-dot"></span>Our craft</span>
        <h2>Made by hand, checked by eye.</h2>
        <p>Each piece is shaped, soldered and finished by skilled hands &mdash; then quality-checked before it ever reaches you. It&rsquo;s slower than a factory line, and that&rsquo;s the point.</p>
        <p>The result is jewellery with weight, detail and a finish built to last.</p>
      </div>
      <div class="va-block__media">
        <img loading="lazy" src="https://velorajewels.in/cdn/shop/files/workshop-woman-jeweler-is-busy-soldering-jewelry_11zon.jpg" alt="A Velora jeweller soldering a silver piece by hand">
      </div>
    </article>
  </section>

  <!-- TRUST PANEL (signature moment) -->
  <section class="va-trust va-reveal">
    <span class="va-eyebrow va-eyebrow--light"><span class="va-dot va-dot--light"></span>What &ldquo;authentic&rdquo; means here</span>
    <h2 class="va-trust__title">92.5 sterling silver.<br>Nothing hiding underneath.</h2>
    <div class="va-trust__grid">
      <div class="va-trust__item">
        <h3>Genuinely stamped</h3>
        <p>Every piece is crafted in real 92.5 sterling silver &mdash; never silver-plated, never mystery metal.</p>
      </div>
      <div class="va-trust__item">
        <h3>Lasting shine</h3>
        <p>A finish built to hold its glow, so your favourite piece keeps looking new far longer.</p>
      </div>
      <div class="va-trust__item">
        <h3>Honest by default</h3>
        <p>We&rsquo;ll always tell you exactly what you&rsquo;re buying. When we say pure silver, we mean it.</p>
      </div>
    </div>
  </section>

  <!-- BESPOKE -->
  <section class="va-story">
    <article class="va-block va-reveal">
      <div class="va-block__text">
        <span class="va-eyebrow"><span class="va-dot"></span>Bespoke</span>
        <h2>Made for you &mdash; not just for the shelf.</h2>
        <p>Some of our most-loved pieces began as a single customer&rsquo;s idea. Through our bespoke service you can design something entirely your own &mdash; from first sketch to finished piece.</p>
        <p>Made with the same care whether it&rsquo;s an everyday piece or a one-of-a-kind gift.</p>
        <a class="va-link" href="/pages/contact">Start a bespoke piece <span aria-hidden="true">&rarr;</span></a>
      </div>
      <div class="va-block__media">
        <img loading="lazy" src="https://velorajewels.in/cdn/shop/files/craftswoman-using-blow-torch_11zon.jpg" alt="A craftswoman finishing a bespoke silver piece">
      </div>
    </article>
  </section>

  <!-- STATS -->
  <section class="va-stats va-reveal">
    <div class="va-stat"><span class="va-stat__num">1,500+</span><span class="va-stat__label">Happy in-store customers</span></div>
    <div class="va-stat"><span class="va-stat__num">92.5</span><span class="va-stat__label">Sterling silver, always</span></div>
    <div class="va-stat"><span class="va-stat__num">24 hrs</span><span class="va-stat__label">Dispatch, beautifully packed</span></div>
    <div class="va-stat"><span class="va-stat__num">1</span><span class="va-stat__label">Real store you can visit</span></div>
  </section>

  <!-- VISIT / CTA -->
  <section class="va-visit va-reveal">
    <div class="va-visit__text">
      <span class="va-eyebrow"><span class="va-dot"></span>Come say hello</span>
      <h2>Wherever you shop, we&rsquo;re right here.</h2>
      <p>Order online and your piece ships within 24 hours. Prefer to see it in person first? Visit us in Ghatkopar. Have a question before you buy? Message a real person on WhatsApp &mdash; we answer.</p>
      <address class="va-address">
        Shop 2, 3, 4, Paras Darshan,<br>
        Mahatma Gandhi Rd, Ghatkopar East,<br>
        Mumbai, Maharashtra 400077<br>
        <span class="va-hours">Open daily &middot; 10:00 &ndash; 19:00</span>
      </address>
      <div class="va-cta-row">
        <a class="va-btn va-btn--solid" href="https://wa.me/917498645396" target="_blank" rel="noopener">Message us on WhatsApp</a>
        <a class="va-btn va-btn--ghost" href="/collections/all">Shop the collection</a>
      </div>
    </div>
    <a class="va-visit__map" href="https://share.google/YVamKNq4kw6PSBFT6" target="_blank" rel="noopener" aria-label="Open Velora Jewels store location in Google Maps">
      <img loading="lazy" src="https://velorajewels.in/cdn/shop/files/map_a5aae5e0-01a9-4eef-8bec-a07cc7acc18a.png" alt="Map to Velora Jewels, Ghatkopar East">
      <span class="va-visit__pin">Get directions <span aria-hidden="true">&rarr;</span></span>
    </a>
  </section>

</div>

<style>
/* ---- VELORA ABOUT — scoped under .va — store-matched palette (no gold) ---- */
.va{
  --ink:#1F2A3D;         /* deep navy-charcoal, matches store text */
  --navy-soft:#2A3852;
  --slate:#8A93A0;       /* pewter accent */
  --slate-deep:#566373;  /* accent text on light */
  --silver:#C7CDD6;      /* light accent on dark */
  --mist:#E9EBEF;        /* soft blue-grey, your icon-badge tone */
  --ivory:#FBF9F5;
  --charcoal:#2B2F36;
  --line:#E7E4DC;
  --maxw:1140px;
  font-family:"Jost",system-ui,-apple-system,sans-serif;
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
.va *,.va *::before,.va *::after{box-sizing:border-box;}
.va img{display:block;width:100%;height:100%;object-fit:cover;}
.va h1,.va h2,.va h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:var(--ink);margin:0;letter-spacing:.2px;}
.va p{margin:0 0 1.1rem;}
.va strong{font-weight:500;color:var(--ink);}

/* eyebrow + chain dot */
.va-eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Jost",sans-serif;font-weight:500;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--slate-deep);
  margin-bottom:1.1rem;}
.va-eyebrow--light{color:var(--silver);}
.va-dot{width:7px;height:7px;background:var(--slate);transform:rotate(45deg);display:inline-block;}
.va-dot--light{background:var(--silver);}

/* HERO */
.va-hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden;}
.va-hero__img{position:absolute;inset:0;
  background:#101826 url("https://velorajewels.in/cdn/shop/files/jeweler-working-his-workshop-cutting-gold-ring-with-saw_11zon_1.jpg") center/cover no-repeat;
  transform:scale(1.04);filter:saturate(.85);}
.va-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,40,.32) 0%,rgba(20,26,40,.5) 55%,rgba(20,26,40,.85) 100%);}
.va-hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 7vw 8vh;}
.va-hero__title{color:#fff;font-size:clamp(2.9rem,7vw,5.4rem);line-height:1.02;font-weight:500;}
.va-hero__title em{font-style:italic;color:var(--silver);}
.va-hero__sub{color:rgba(255,255,255,.85);max-width:34rem;font-size:1.06rem;margin-top:1.4rem;}

/* STORY blocks */
.va-story{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 7vw;}
.va-thread{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);opacity:.8;}
@media(max-width:820px){.va-thread{display:none;}}
.va-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2rem,4vw,3.5rem) 0;}
.va-block+.va-block{border-top:1px solid var(--line);}
.va-block--reverse .va-block__text{order:2;}
.va-block__media{aspect-ratio:4/5;overflow:hidden;border-radius:2px;box-shadow:0 20px 50px -30px rgba(31,42,61,.45);}
.va-block__media img{transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.va-block:hover .va-block__media img{transform:scale(1.05);}
.va-block h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;margin-bottom:1.1rem;}
.va-block p{max-width:32rem;}

/* link */
.va-link{display:inline-block;margin-top:.4rem;font-weight:500;font-size:.9rem;letter-spacing:.05em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--slate);padding-bottom:3px;}
.va-link:hover{color:var(--slate-deep);border-color:var(--slate-deep);}
.va-link span{transition:margin-left .3s;display:inline-block;}
.va-link:hover span{margin-left:5px;}

/* TRUST panel */
.va-trust{background:var(--ink);color:rgba(255,255,255,.82);padding:clamp(3.5rem,8vw,6.5rem) 7vw;text-align:center;}
.va-trust__title{color:#fff;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.1;margin:0 auto 3rem;max-width:22ch;}
.va-trust__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);max-width:var(--maxw);margin:0 auto;}
.va-trust__item{position:relative;padding-top:1.6rem;}
.va-trust__item::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--silver);}
.va-trust__item h3{color:#fff;font-size:1.5rem;margin-bottom:.5rem;}
.va-trust__item p{font-size:.96rem;margin:0;color:rgba(255,255,255,.68);}

/* STATS */
.va-stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 7vw;gap:1.5rem;text-align:center;}
.va-stat{padding:0 .5rem;}
.va-stat+.va-stat{border-left:1px solid var(--line);}
.va-stat__num{display:block;font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--ink);font-size:clamp(2.1rem,4vw,3rem);line-height:1;}
.va-stat__label{display:block;margin-top:.6rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);}

/* VISIT */
.va-visit{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,6rem) 7vw clamp(4rem,8vw,7rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.va-visit h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;margin-bottom:1.1rem;}
.va-address{font-style:normal;color:var(--charcoal);margin:1.4rem 0 1.8rem;font-size:1.02rem;line-height:1.9;}
.va-hours{color:var(--slate-deep);font-weight:500;font-size:.9rem;letter-spacing:.04em;}
.va-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;}
.va-btn{display:inline-block;padding:.95rem 1.7rem;font-family:"Jost",sans-serif;font-weight:500;font-size:.86rem;letter-spacing:.06em;text-decoration:none;border-radius:2px;transition:transform .25s,background .25s,color .25s;}
.va-btn--solid{background:var(--ink);color:#fff;}
.va-btn--solid:hover{background:var(--navy-soft);transform:translateY(-2px);}
.va-btn--ghost{border:1px solid var(--ink);color:var(--ink);}
.va-btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.va-visit__map{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px;box-shadow:0 20px 50px -30px rgba(31,42,61,.45);}
.va-visit__map img{transition:transform .8s ease;}
.va-visit__map:hover img{transform:scale(1.06);}
.va-visit__pin{position:absolute;left:1rem;bottom:1rem;background:#fff;color:var(--ink);font-weight:500;font-size:.82rem;letter-spacing:.04em;padding:.6rem 1rem;border-radius:2px;box-shadow:0 6px 20px -8px rgba(0,0,0,.4);}

/* reveal (visible by default; animates only when JS marks .is-ready) */
.va-reveal{opacity:1;transform:none;}
.va.is-ready .va-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.va.is-ready .va-reveal.is-in{opacity:1;transform:none;}

/* focus + motion */
.va a:focus-visible{outline:2px solid var(--slate-deep);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .va *{transition:none!important;animation:none!important;}
  .va.is-ready .va-reveal{opacity:1;transform:none;}
}

/* responsive */
@media(max-width:820px){
  .va-block,.va-visit{grid-template-columns:1fr;gap:1.8rem;}
  .va-block--reverse .va-block__text{order:0;}
  .va-block__media{aspect-ratio:16/11;}
  .va-trust__grid{grid-template-columns:1fr;gap:2rem;}
  .va-trust__item::before{left:0;transform:rotate(45deg);}
  .va-trust__item{padding-top:0;padding-left:1.4rem;text-align:left;}
  .va-trust{text-align:left;}
  .va-trust__title{margin-left:0;}
  .va-stats{grid-template-columns:1fr 1fr;gap:2rem 1rem;}
  .va-stat:nth-child(3){border-left:0;}
  .va-hero{min-height:74vh;}
}
@media(max-width:460px){
  .va-stats{grid-template-columns:1fr 1fr;}
  .va-stat{border-left:0!important;}
}
</style>

<script>
(function(){
  var root=document.querySelector('.va');
  if(!root)return;
  if(window.matchMedia('(prefers-reduced-motion:reduce)').matches)return;
  root.classList.add('is-ready');
  var els=root.querySelectorAll('.va-reveal');
  if(!('IntersectionObserver'in window)){els.forEach(function(e){e.classList.add('is-in');});return;}
  var io=new IntersectionObserver(function(entries){
    entries.forEach(function(en){if(en.isIntersecting){en.target.classList.add('is-in');io.unobserve(en.target);}});
  },{threshold:.15});
  els.forEach(function(e){io.observe(e);});
})();
</script>