Untitled Snippet

<!-- LABEL AKKSHITA ARORA - DIWALI INTRO -->

<div id="la-diwali-intro" aria-hidden="true">

  <div class="la-diwali-lights"></div>

  <div class="la-diwali-lanterns" aria-hidden="true">

    <span class="la-lantern l1">🏮</span>

    <span class="la-lantern l2">🏮</span>

    <span class="la-lantern l3">🏮</span>

    <span class="la-lantern l4">🏮</span>

    <span class="la-lantern l5">🏮</span>

  </div>

  <div class="la-diwali-flowers" aria-hidden="true">

    ✿　✦　🌼　✦　✿　✦　🌼　✦　✿

  </div>

  <div class="la-diwali-content">

    <div class="la-brand-mark">LA</div>

    <div class="la-brand-name">LABEL AKKSHITA ARORA</div>

    <div class="la-brand-line"></div>

    <div class="la-greeting-small">A FESTIVE CELEBRATION</div>

    <div class="la-happy">Happy</div>

    <h1 class="la-diwali-title">Diwali</h1>

    <div class="la-greeting-subtitle">

      May your world shine with elegance

    </div>

    <div class="la-diya-row" aria-hidden="true">

      <div class="la-diya-wrap">

        <span class="la-flame">✦</span>

        <span class="la-diya">🪔</span>

      </div>

      <div class="la-diya-wrap la-center-diya">

        <span class="la-flame">✦</span>

        <span class="la-diya">🪔</span>

      </div>

      <div class="la-diya-wrap">

        <span class="la-flame">✦</span>

        <span class="la-diya">🪔</span>

      </div>

    </div>

    <div class="la-festive-footer">

      <span>✧ FESTIVE LIGHTS · TIMELESS ELEGANCE ✧</span>

    </div>

  </div>

  <div class="la-corner la-corner-left">❋</div>

  <div class="la-corner la-corner-right">❋</div>

  <div class="la-bottom-decoration">✦　❋　✦　❋　✦　❋　✦</div>

</div>

<style>

#la-diwali-intro {

  position: fixed;

  inset: 0;

  z-index: 999999;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  color: #ffe7a0;

  background:

    radial-gradient(ellipse at 50% 75%, #8c682d 0%, transparent 36%),

    radial-gradient(ellipse at 50% 35%, #52612b 0%, transparent 65%),

    linear-gradient(145deg, #172c17, #334321 48%, #172616);

  font-family: Georgia, "Times New Roman", serif;

  animation: laIntroExit 2.8s ease-in-out forwards;

}

#la-diwali-intro * {

  box-sizing: border-box;

}

.la-diwali-content {

  width: 100%;

  padding: 28px 18px;

  text-align: center;

  position: relative;

  z-index: 3;

  animation: laContentReveal 2.4s ease both;

}

.la-brand-mark {

  width: 54px;

  height: 54px;

  margin: 0 auto 12px;

  display: grid;

  place-items: center;

  border: 1px solid #f9d779;

  border-radius: 50%;

  background: #d98228;

  color: #fff3bd;

  font-size: 23px;

  font-weight: bold;

  box-shadow: 0 0 24px #f5bd4a55;

}

.la-brand-name {

  font-family: Georgia, serif;

  font-size: clamp(13px, 2.3vw, 20px);

  letter-spacing: 3px;

  color: #fff0b8;

}

.la-brand-line {

  width: min(280px, 65%);

  height: 1px;

  margin: 13px auto 18px;

  background: linear-gradient(90deg, transparent, #ffdf80, transparent);

}

.la-greeting-small {

  font: 11px Arial, sans-serif;

  letter-spacing: 5px;

  color: #f9dda0;

}

.la-happy {

  margin-top: 8px;

  font-size: clamp(37px, 7vw, 68px);

  font-style: italic;

  color: #ffe8a0;

  text-shadow: 0 0 24px #f7cf5c66;

}

.la-diwali-title {

  margin: -5px 0 0 !important;

  font-size: clamp(65px, 13vw, 125px) !important;

  line-height: 1.04 !important;

  font-weight: normal !important;

  font-style: italic;

  letter-spacing: -4px;

  color: #ffdf76 !important;

  text-decoration: none !important;

  text-shadow: 0 3px 0 #8d6122, 0 0 32px #ffd76555;

}

.la-greeting-subtitle {

  margin-top: 14px;

  font-size: clamp(11px, 2vw, 16px);

  letter-spacing: 1px;

  color: #fff2c9;

}

.la-diya-row {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  gap: clamp(18px, 7vw, 65px);

  margin: 24px auto 14px;

}

.la-diya-wrap {

  position: relative;

  font-size: clamp(29px, 5vw, 45px);

  animation: laDiyasGlow 1s ease-in-out infinite alternate;

}

.la-center-diya {

  font-size: clamp(47px, 8vw, 70px);

  animation-delay: .3s;

}

.la-flame {

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  color: #fff2a1;

  font-size: 15px;

  text-shadow: 0 0 15px #ffb526;

  animation: laFlameFlicker .45s infinite alternate;

}

.la-center-diya .la-flame {

  font-size: 22px;

  top: -15px;

}

.la-festive-footer {

  margin-top: 20px;

  font: 9px Arial, sans-serif;

  letter-spacing: 2px;

  color: #ffdf8c;

}

.la-diwali-lights {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 30px;

  border-top: 2px solid #e4bc60;

  background:

    radial-gradient(circle, #fff8be 0 2px, #ffcb50 3px, transparent 7px)

    0 4px / 48px 23px repeat-x;

  filter: drop-shadow(0 0 6px #ffd65e);

  animation: laLightsTwinkle .8s infinite alternate;

}

.la-diwali-lanterns {

  position: absolute;

  top: 25px;

  left: 0;

  width: 100%;

  display: flex;

  justify-content: space-around;

  pointer-events: none;

}

.la-lantern {

  position: relative;

  font-size: clamp(24px, 4vw, 43px);

  transform-origin: top center;

  animation: laLanternSwing 2.4s ease-in-out infinite alternate;

}

.la-lantern::before {

  content: "";

  position: absolute;

  height: 25px;

  width: 1px;

  background: #d9b65c;

  left: 50%;

  bottom: 90%;

}

.la-lantern.l2 { animation-delay: -.8s; }

.la-lantern.l3 { animation-delay: -.3s; }

.la-lantern.l4 { animation-delay: -1.2s; }

.la-lantern.l5 { animation-delay: -.5s; }

.la-diwali-flowers {

  position: absolute;

  bottom: 12px;

  width: 100%;

  overflow: hidden;

  text-align: center;

  white-space: nowrap;

  font-size: clamp(13px, 2vw, 22px);

  color: #ffdb76;

  text-shadow: 0 0 10px #f4b83f;

}

.la-corner {

  position: absolute;

  top: 10px;

  font-size: clamp(45px, 8vw, 85px);

  color: #f5c65d;

  opacity: .7;

}

.la-corner-left { left: 10px; }

.la-corner-right { right: 10px; }

.la-bottom-decoration {

  position: absolute;

  bottom: 35px;

  width: 100%;

  text-align: center;

  font-size: 16px;

  color: #eac15d;

  opacity: .7;

}

@keyframes laIntroExit {

  0%, 75% { opacity: 1; visibility: visible; }

  100% { opacity: 0; visibility: hidden; }

}

@keyframes laContentReveal {

  0% { opacity: 0; transform: scale(.92) translateY(12px); }

  18% { opacity: 1; transform: scale(1) translateY(0); }

  85% { opacity: 1; }

  100% { opacity: 0; transform: scale(1.025); }

}

@keyframes laLanternSwing {

  from { transform: rotate(-7deg); }

  to { transform: rotate(7deg); }

}

@keyframes laDiyasGlow {

  from { filter: drop-shadow(0 0 3px #ffc14b); }

  to { filter: drop-shadow(0 0 17px #ffcf59); }

}

@keyframes laFlameFlicker {

  from { opacity: .65; transform: translateX(-50%) scale(.85); }

  to { opacity: 1; transform: translateX(-50%) scale(1.15); }

}

@keyframes laLightsTwinkle {

  from { opacity: .7; }

  to { opacity: 1; }

}

@media (max-width: 600px) {

  .la-diwali-content { padding: 20px 12px; }

  .la-brand-name { letter-spacing: 2px; }

  .la-greeting-small { letter-spacing: 3px; }

  .la-diwali-title { letter-spacing: -2px; }

  .la-greeting-subtitle { max-width: 290px; margin: 12px auto 0; }

  .la-diwali-lanterns { top: 18px; }

  .la-lantern:nth-child(2),

  .la-lantern:nth-child(4) { display: none; }

  .la-corner { font-size: 38px; }

  .la-festive-footer { letter-spacing: 1px; }

}

@media (prefers-reduced-motion: reduce) {

  #la-diwali-intro { animation-duration: .5s; }

  #la-diwali-intro * { animation: none !important; }

}

</style>

<script>

(function () {

  "use strict";

  var intro = document.getElementById("la-diwali-intro");

  if (!intro) return;

  var path = window.location.pathname.toLowerCase();

  /* Never show on cart, checkout, account or order confirmation */

  var excluded =

    document.body.classList.contains("woocommerce-cart") ||

    document.body.classList.contains("woocommerce-checkout") ||

    document.body.classList.contains("woocommerce-account") ||

    document.body.classList.contains("woocommerce-order-received") ||

    /\/(cart|checkout|my-account)(\/|$)/.test(path) ||

    /order-received/.test(path);

  if (excluded) {

    intro.remove();

    return;

  }

  /* Show once per browser tab session */

  var storageKey = "la_diwali_intro_seen_v1";

  try {

    if (sessionStorage.getItem(storageKey)) {

      intro.remove();

      return;

    }

    sessionStorage.setItem(storageKey, "1");

  } catch (error) {

    /* If storage is unavailable, still show the intro on this page */

  }

  /* Remove the overlay after the animation finishes */

  window.setTimeout(function () {

    if (intro && intro.parentNode) {

      intro.remove();

    }

  }, 3000);

})();

</script>