hds-web 1.33.2 → 1.33.4

package/src/index.css

@@ -0,0 +1,907 @@
+@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,200&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Typography classes */
+
+.marketoFormWrapper {
+  width: 100%;
+}
+.shodow-none:focus {
+  box-shadow: none !important;
+}
+.marketoFormWrapper .mktoFormRow {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoOffset {
+  display: none;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField,
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoLabel {
+  display: none;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoTextField,
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoField {
+  width: 100%;
+  height: 48px;
+  border-radius: 8px;
+  text-indent: 16px;
+  padding: 0;
+}
+
+.marketoFormWrapper .mktoButtonRow {
+  width: 100%;
+  padding-top: 12px;
+}
+
+.marketoFormWrapper .mktoButtonRow .mktoButtonWrap {
+  margin-left: 0;
+}
+
+.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton {
+
+  height: 48px;
+  color: #35C4F0;
+
+
+}
+
+
+.hds-hidden{
+  display: none;
+
+}
+ @media (min-width: 905px) {
+   .hds-hidden-tbl {
+     display: none !important;
+   }
+ }
+
+ @media (min-width: 800px) {
+   .hds-hidden-tbm {
+     display: none;
+   }
+ }
+
+ .video-play-btn {
+  z-index: 10;
+}
+
+.video-play-btn:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  display: block;
+  width: 56px;
+  height: 56px;
+  /* background: #3970FD; */
+  border-radius: 50%;
+  animation: pulse-border 1500ms ease-out infinite;
+}
+.video-play-btn:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  display: block;
+  width: 56px;
+  height: 56px;
+  /* background: #3970FD; */
+  border-radius: 50%;
+  transition: all 200ms;
+}
+.video-play-btn>div {
+  z-index: 2;
+}
+.video-play-btn svg {
+  fill: #fff;
+}
+
+@keyframes pulse-border {
+  0% {
+      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
+      opacity: 1;
+  }
+  100% {
+      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
+      opacity: 0;
+  }
+}
+
+.search-results {
+  width: calc(100% - 150px);
+}
+
+.word-break {
+  word-break: break-word;
+}
+.search-results .ais-Hits .ais-Hits-list,
+.search-results .Hits .ais-Hits-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 40px;
+  padding-top: 26px;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item,
+.search-results .Hits .ais-Hits-list .ais-Hits-item {
+  border-bottom: 1px solid transparent;
+  padding: 12px;
+  border-radius: 16px;
+  transition: all .3s ease-in-out;
+}
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item:hover,
+.search-results .Hits .ais-Hits-list .ais-Hits-item:hover {
+  background-color: #F0F4FF;
+}
+
+/* .search-results .ais-Hits .ais-Hits-list .ais-Hits-item:hover,
+.search-results .Hits .ais-Hits-list .ais-Hits-item:hover {
+  border-bottom: 1px solid #e5e7eb;
+} */
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item .hit-slug,
+.search-results .Hits .ais-Hits-list .ais-Hits-item .hit-slug {
+  word-break: break-word;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item .ais-Snippet-highlighted,
+.search-results .Hits .ais-Hits-list .ais-Hits-item .ais-Snippet-highlighted {
+  color: #1E56E3;
+  background-color: transparent;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item .ais-Highlight-highlighted,
+.search-results .Hits .ais-Hits-list .ais-Hits-item .ais-Highlight-highlighted {
+  color: #1E56E3;
+  background-color: transparent;
+}
+@media (max-width: 799px) {
+
+  .search-results .ais-Hits .ais-Hits-list,
+  .search-results .Hits .ais-Hits-list {
+    grid-template-columns: 1fr;
+  }
+  .search-results {
+    width: 100%;
+  }
+}
+
+@media (min-width: 800px) and (max-width: 905px) {
+
+  .search-results .ais-Hits .ais-Hits-list,
+  .search-results .Hits .ais-Hits-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.card {
+  max-width: 920px;
+  background-size: cover;
+  display: flex;
+  /* Add flex display */
+  flex-direction: column;
+  /* Stack elements vertically */
+  align-items: center;
+  /* Center align items horizontally */
+  justify-content: center;
+
+  position: relative;
+
+  transition-duration: 1000ms;
+  /* transition-duration: 300ms; */
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transform: rotate3d(0);
+}
+
+.card:hover {
+  transition-duration: 500ms;
+  /* transition-duration: 500ms; */
+  box-shadow: 0 5px 20px 5px #00000044;
+  border-radius: 24px;
+}
+
+.card .glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/*test*/
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+.carouselShadow{
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.border-transparent{
+  border: transparent !important;
+}
+
+.gridAutoClass {
+  flex: 1 0 30%;
+  margin-top: 40px;
+  margin-right: 32px;
+  background: blue;
+  justify-content: center;
+  display: flex;
+}
+
+@keyframes pill-move-left {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+  50% {
+    left: 0;
+    width: 100%;
+  }
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+@keyframes pill-move-right {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+  50% {
+    left: 100%;
+    width: 0%;
+  }
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+@keyframes up-right {
+  0% {
+    transform: scale(1);
+    opacity: 0.25;
+  }
+  50% {
+    transform: scale (1, 5);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.25;
+  }
+}
+
+.blinking {
+  -webkit-animation: up-right 1s infinite;
+  -moz-animation: up-right 1s infinite;
+  -o-animation: up-right 1s infinite;
+  animation: up-right 1s infinite;
+}
+
+.card-animation-wrapper {
+    position: relative;
+  }
+
+  .card-animation-wrapper .feature-card {
+    transition: all;
+  }
+
+  .card-animation-wrapper .feature-card:first-child {
+    animation: card1 15s infinite;
+  }
+
+  .card-animation-wrapper .feature-card:nth-child(2) {
+    animation: card2 15s infinite;
+  }
+
+  .card-animation-wrapper .feature-card:nth-child(3) {
+    animation: card3 15s infinite;
+  }
+  @keyframes card1 {
+    0%   {
+      transform: translate(0, 0);
+      z-index: 3;
+    }
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+    6.66%, 26.64%  {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    66.6%, 100% {
+      transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+
+  @media (max-width: 600px) {
+  @keyframes card1 {
+    0%   {
+      transform: translate(0, 0);
+      z-index: 3;
+    }
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+    6.66%, 26.64%  {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    66.6%, 100% {
+      transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+}
+  @keyframes card2 {
+    0%   {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    6.66%, 26.64%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+  }
+
+  @media (max-width: 600px) {
+  @keyframes card2 {
+    0%   {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    6.66%, 26.64%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+  }
+}
+  @keyframes card3 {
+    0%   {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    6.66%, 26.64%  {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    33.3%, 59.94%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+  }
+  @media (max-width: 600px) {
+  @keyframes card3 {
+    0%   {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    6.66%, 26.64%  {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    33.3%, 59.94%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+  }
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+
+.display-2xl-bold {
+    @apply text-7xl font-bold;
+    letter-spacing: -0.015em;
+}
+
+.display-xl-bold {
+    @apply text-6xl font-bold;
+    letter-spacing: -0.01em;
+}
+
+.display-lg-bold {
+    @apply text-5xl font-bold;
+    letter-spacing: -0.01em;
+}
+
+.display-md-regular {
+    @apply text-4xl font-normal;
+}
+
+.display-md-bold {
+    @apply text-4xl font-bold;
+}
+
+.display-sm-regular {
+    @apply text-3xl font-normal;
+}
+
+.display-sm-bold {
+    @apply text-3xl font-bold;
+}
+
+.display-xs-regular {
+    @apply text-2xl font-normal;
+}
+
+.display-xs-bold {
+    @apply text-2xl font-bold;
+}
+
+.text-xl-regular {
+    @apply text-xl font-normal;
+}
+
+.text-xl-medium {
+    @apply text-xl font-medium;
+}
+
+.text-xl-bold {
+    @apply text-xl font-bold;
+}
+
+.text-xl-regular-italic {
+    @apply text-xl font-normal italic;
+}
+
+.text-xl-medium-italic {
+    @apply text-xl font-medium italic;
+}
+
+.text-xl-bold-italic {
+    @apply text-xl font-bold italic;
+}
+
+.text-lg-regular {
+    @apply text-lg font-normal;
+}
+
+.text-lg-medium {
+    @apply text-lg font-medium;
+}
+
+.text-lg-bold {
+    @apply text-lg font-bold;
+}
+
+.text-lg-regular-italic {
+    @apply text-lg font-normal italic;
+}
+
+.text-lg-medium-italic {
+    @apply text-lg font-medium italic;
+}
+
+.text-lg-bold-italic {
+    @apply text-lg font-bold italic;
+}
+
+.text-md-regular {
+    @apply text-base font-normal;
+}
+
+.text-md-medium {
+    @apply text-base font-medium;
+}
+
+.text-md-bold {
+    @apply text-base font-bold;
+}
+
+.text-md-regular-italic {
+    @apply text-base font-normal italic;
+}
+
+.text-md-medium-italic {
+    @apply text-base font-medium italic;
+}
+
+.text-md-bold-italic {
+    @apply text-base font-bold italic;
+}
+
+.text-sm-regular {
+    @apply text-sm font-normal;
+}
+
+.text-sm-medium {
+    @apply text-sm font-medium;
+}
+
+.text-sm-bold {
+    @apply text-sm font-bold;
+}
+
+.text-sm-regular-italic {
+    @apply text-sm font-normal italic;
+}
+
+.text-sm-medium-italic {
+    @apply text-sm font-medium italic;
+}
+
+.text-sm-bold-italic {
+    @apply text-sm font-bold italic;
+}
+
+.text-xs-regular {
+    @apply text-xs font-normal;
+    letter-spacing: 0.01em;
+}
+
+.text-xs-medium {
+    @apply text-xs font-medium;
+    /* or 133% */
+
+    letter-spacing: 0.01em;
+}
+
+.text-xs-bold {
+    @apply text-xs font-bold;
+    letter-spacing: 0.01em;
+}
+
+.text-xs-regular-italic {
+    @apply text-xs font-normal italic;
+
+    letter-spacing: 0.01em;
+}
+
+.text-xs-medium-italic {
+    @apply text-xs font-medium italic;
+
+    letter-spacing: 0.01em;
+}
+
+.text-xs-bold-italic {
+    @apply text-xs font-bold italic;
+
+    letter-spacing: 0.01em;
+}
+
+.code-lg {
+    @apply text-lg font-normal;
+
+}
+
+.code-md {
+    @apply text-base font-normal;
+}
+
+.code-sm {
+    @apply text-sm font-normal;
+}
+
+.button-xl {
+    @apply text-md-medium rounded-full py-3 px-7;
+}
+
+.button-2xl {
+    @apply text-lg-medium rounded-full py-4 px-8;
+
+}
+.bg-transparent{
+    background-color: transparent !important;
+}
+
+.language-javascript {
+    background-color: transparent !important;
+    padding: 0 !important;
+}
+
+.token.operator {
+    background: none !important;
+}
+
+
+.border-80 {
+  position: relative;
+}
+
+.border-80::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 8%;
+  width: 80%;
+  border-bottom: 1px solid #E5E7EB;
+}
+
+.border-90 {
+  position: relative;
+    background-color: white;
+}
+
+.border-90::after {
+  content: "";
+position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-bottom: 1px solid rgb(255, 255, 255);
+}
+
+
+
+
+#load {
+  position: absolute;
+  width: 600px;
+  height: 36px;
+  left: 50%;
+  top: 40%;
+  margin-left: -300px;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+#load div {
+  position: absolute;
+  width: 200px;
+  opacity: 0;
+  animation: move 10s linear infinite;
+  -o-animation: move 10s linear infinite;
+  -moz-animation: move 10s linear infinite;
+  -webkit-animation: move 10s linear infinite;
+  color: #35C4F0;
+}
+
+#load div:nth-child(2) {
+  animation-delay: 0.2s;
+  -o-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
+}
+
+#load div:nth-child(3) {
+  animation-delay: 0.4s;
+  -o-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+}
+
+#load div:nth-child(4) {
+  animation-delay: 0.6s;
+  -o-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+}
+
+#load div:nth-child(5) {
+  animation-delay: 0.8s;
+  -o-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+}
+
+#load div:nth-child(6) {
+  animation-delay: 1s;
+  -o-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+}
+
+#load div:nth-child(7) {
+  animation-delay: 1.2s;
+  -o-animation-delay: 1.2s;
+  -moz-animation-delay: 1.2s;
+  -webkit-animation-delay: 1.2s;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+
+    opacity: 0;
+  }
+}
+
+@-moz-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+    -moz-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+
+    opacity: 0;
+  }
+}
+
+@-o-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+
+    opacity: 0;
+  }
+}
+
+
+
+.carousel-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: 2rem;
+
+}
+
+.carousel-content {
+  position: relative;
+ 
+}
+
+.carousel-item {
+  position: absolute;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  
+}
+
+.carousel-btns {
+  
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  z-index: 6;
+
+
+}
+