xrpl-dev-portal/styles/_top-banner.scss

.web-banner {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  height: 52px;
  background: #D919FF !important;
  padding: 7px 35px;
  font-family: "Work Sans";
  z-index: 9999;
  cursor: pointer;
  &:hover {
    text-decoration: none;
    color: $white;
    .button-icon{
      animation: iconJitter 1s ease-in-out forwards;
    }
  }
  color: $white !important;
  text-align: center;
  font-family: "Work Sans";
  font-size: 26px; // Further scaled down from 28px
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.32px;
  // Pseudo-element for the fill animation
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; // Full width so that we can scale it
    height: 100%;
    background-color: #7919FF;
    z-index: 0;
    transform: scaleX(0);       // Start scaled down to 0
    transform-origin: left;     // Scale from the left edge
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;     // Hint for smoother animations
  }

  // On hover, scale to full width
  &:hover::after {
    transform: scaleX(1);
  }
  // Ensure direct children are above the pseudo-element
  > * {
    position: relative;
    z-index: 1;
  }

  @media (max-width: 991px) {
    padding: 0 20px;
  }
  .banner-button{
    display: flex;
    align-items: center;
    gap: 14.5px;
    img{
      width: 24.5px; 
      height: 33.7px;
    }
  }
  .event-info {

    @media (max-width: 524px) {
      font-size: 15px;
    }
  }

  .banner-event-details {
    display: flex;
    gap: 32px;
  }

  .ticket-button {
    border: 1px solid var(--XRPL-Primary-White, #fff);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 3141.892px;
    background: inherit;
    color: #FFF;
    text-align: center;
    letter-spacing: -0.16px;
    padding: 8px 16px;
    font: 600 15px/1 Work Sans ;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transform-origin: center;
    transition: background-color 0.3s ease, color 0.3s ease;

    @media (max-width: 524px) {
      font: 600 9px/1 Work Sans ;
      width: 117px;
      height: 27px;
      padding: 6px 12px;
    }
  }

  .button-icon {
    aspect-ratio: 0.71;
    object-fit: contain;
    width: 12.5px; // Scaled down from 13.8px
    animation: none;

    @media (max-width: 524px) {
      width: 9px; // Scaled down from 10px
    }

    align-self: stretch;
    margin: auto 0;
    transform-style: preserve-3d;
  }

  @keyframes iconJitter {
    0% {
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(22deg) skew(0deg, 0deg);
    }

    40% {
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(55deg) skew(0deg, 0deg);
    }

    70% {
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(40deg) skew(0deg, 0deg);
    }

    100% {
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(45deg) skew(0deg, 0deg);
    }
  }

}

.web-banner a {
  text-decoration: none;
  // background-color: var(--XRPL-Secondary-Blue-Purple, #7919FF);
}

// // to avoid a focus outline causing the background to turn white
// .web-banner:focus,
// .web-banner:active {
//   background-color: var(--XRPL-Secondary-Blue-Purple, #7919FF) !important;
// }

.button-icon {
  animation: iconJitter 1s ease-in-out;
  animation-iteration-count: 1;
}