@ptcwebops/ptcw-design 6.2.14-beta → 6.2.14

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -1932,6 +1932,686 @@ ptc-link, ptc-square-card,
   width: 100%;
 }
 
+.preloader-events-listing .jumbotron {
+  margin-bottom: 48px;
+}
+.preloader-events-listing .jumbotron .jumbotron-bg {
+  height: 954px;
+  background-color: var(--color-gray-03);
+  position: relative;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg {
+    height: 1027px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-1 {
+  width: 107px;
+  margin-bottom: 38px;
+  margin-top: 22px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-1 {
+    margin-bottom: 40px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-2 {
+  width: 105px;
+  margin-bottom: 24px;
+  align-self: center;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-2 {
+    margin-bottom: 25px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
+  width: 70%;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
+    width: 335px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
+    width: 445px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
+  width: 85%;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
+    width: 397px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
+    width: 525px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-5 {
+  width: 131px;
+  align-self: center;
+  margin-bottom: 20px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-5 {
+    width: 769px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
+  width: 95%;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
+    width: 411px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
+    width: 621px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
+  width: 85%;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
+    width: 383px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
+    display: none;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
+  width: 98%;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
+    width: 435px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
+    display: none;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
+  width: 60%;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
+    width: 199px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
+    display: none;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
+  width: 70%;
+  margin-top: 32px;
+  margin-bottom: 65px;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
+    width: 411px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
+    width: 232px;
+    margin-top: 35px;
+    margin-bottom: 89px;
+  }
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .grid-cards-div {
+  position: relative;
+  z-index: 3;
+}
+.preloader-events-listing .jumbotron .jumbotron-bg .white-placeholder {
+  position: absolute;
+  height: 130px;
+  width: 100%;
+  background-color: #F3F3F3;
+  bottom: -1px;
+}
+.preloader-events-listing .grid-2 {
+  padding-top: 48px;
+}
+.preloader-events-listing .short-16 {
+  width: 65%;
+  margin-bottom: 20px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .short-16 {
+    width: 275px;
+  }
+}
+.preloader-events-listing .short-11 {
+  width: 95%;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .short-11 {
+    width: 60%;
+  }
+}
+.preloader-events-listing .short-12 {
+  width: 89%;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .short-12 {
+    display: none;
+  }
+}
+.preloader-events-listing .short-15 {
+  width: 70%;
+  align-self: center;
+  margin-bottom: 100px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .short-15 {
+    width: 290px;
+  }
+}
+.preloader-events-listing .grid-cards {
+  display: flex;
+  flex-direction: row;
+  column-gap: 24px;
+  overflow-x: hidden;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-cards {
+    margin: 0 120px;
+  }
+}
+.preloader-events-listing .grid-cards .short-17 {
+  width: 250px;
+  height: 415px;
+  align-self: center;
+  align-self: center;
+  flex-grow: 1;
+  min-width: 250px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-cards .short-17 {
+    width: 270px;
+    min-width: 270px;
+    display: none;
+  }
+}
+.preloader-events-listing .grid-cards-desktop {
+  display: none;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-cards-desktop {
+    display: flex;
+    flex-direction: row;
+    column-gap: 24px;
+    overflow-x: hidden;
+  }
+}
+.preloader-events-listing .grid-cards-desktop .short-17 {
+  width: 250px;
+  height: 415px;
+  align-self: center;
+  align-self: center;
+  flex-grow: 1;
+  min-width: 250px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-cards-desktop .short-17 {
+    width: 270px;
+    min-width: 270px;
+    height: 530px;
+  }
+}
+.preloader-events-listing .grid-long-cards-mobile {
+  display: block;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-long-cards-mobile {
+    display: none;
+  }
+}
+.preloader-events-listing .grid-long-cards-mobile .short-13 {
+  width: 100%;
+  height: 391px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-long-cards-mobile .short-13 {
+    width: 996px;
+    height: 391px;
+    min-width: 996px;
+  }
+}
+.preloader-events-listing .grid-long-cards-mobile .short-14 {
+  display: none;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-long-cards-mobile .short-14 {
+    display: block;
+    width: 996px;
+    height: 391px;
+    min-width: 996px;
+  }
+}
+.preloader-events-listing .grid-long-cards {
+  display: flex;
+  flex-direction: row;
+  column-gap: 24px;
+  overflow-x: hidden;
+  margin-top: 36px;
+  margin-bottom: 30px;
+  display: none;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-long-cards {
+    margin-left: 120px;
+    display: flex;
+  }
+}
+.preloader-events-listing .grid-long-cards .short-13 {
+  width: 100%;
+  height: 391px;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-long-cards .short-13 {
+    width: 996px;
+    height: 391px;
+    min-width: 996px;
+  }
+}
+.preloader-events-listing .grid-long-cards .short-14 {
+  display: none;
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-events-listing .grid-long-cards .short-14 {
+    display: block;
+    width: 996px;
+    height: 391px;
+    min-width: 996px;
+  }
+}
+
+.preloader-blogs-listing-page .block-heading {
+  width: 188px;
+  height: 43px;
+  margin-top: 64px;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 196px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 254px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 195.11px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 235.207px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 248px;
+  }
+}
+.preloader-blogs-listing-page .block-para {
+  width: 256px;
+  height: 20px;
+  margin-bottom: 45px;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 264px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 340px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 280px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 337.296px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 356px;
+  }
+}
+.preloader-blogs-listing-page .topsection-block {
+  height: 754px;
+  margin-bottom: 28px;
+  align-self: center;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .topsection-block {
+    height: 547px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .topsection-block {
+    margin-bottom: 69px;
+  }
+}
+.preloader-blogs-listing-page .card-block {
+  height: 309px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 465px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 397px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 364px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 366px;
+  }
+}
+.preloader-blogs-listing-page .filter-block {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .filter-block {
+    height: 853px;
+    display: block;
+  }
+}
+.preloader-blogs-listing-page .mobile-block {
+  display: grid;
+  margin-bottom: 28px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .mobile-block {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .mobile-cards {
+  display: grid;
+  padding-bottom: 28px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .mobile-cards {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .ipad-cards {
+  display: none;
+  padding-bottom: 28px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .ipad-cards {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .ipad-cards {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .filter-div {
+  display: none;
+  margin-bottom: 28px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .filter-div {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .filter-div {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .filter-top {
+  margin-bottom: 24px;
+}
+.preloader-blogs-listing-page .desktop-cards {
+  display: none;
+  padding-bottom: 48px;
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .desktop-cards {
+    display: grid;
+  }
+}
+.preloader-blogs-listing-page .pagination-block {
+  padding-bottom: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .pagination-block {
+    margin-top: 28px;
+  }
+}
+.preloader-blogs-listing-page .page-block {
+  width: 40px;
+  height: 40px;
+  margin: 0 5px;
+}
+
+.preloader-cs-listing-page .jumbotron-img {
+  height: 300px;
+  background: #fff;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron-img {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .jumbotron {
+  background-color: var(--color-gray-02);
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron {
+    background: #fff;
+  }
+}
+.preloader-cs-listing-page .jumbotron .jumbotron-content {
+  background-color: var(--color-gray-02);
+  padding-top: 18px;
+  padding-bottom: 20px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron .jumbotron-content {
+    padding-top: 106px;
+    padding-bottom: 106px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron .jumbotron-content {
+    background: #fff;
+  }
+}
+.preloader-cs-listing-page .skeleton-jumbotron {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .skeleton-jumbotron {
+    padding-left: 24px;
+    padding-bottom: 24px;
+  }
+}
+.preloader-cs-listing-page .skeleton-jumbotron .cta-wrap {
+  display: flex;
+  width: 50%;
+  column-gap: 14px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .skeleton-jumbotron .cta-wrap {
+    column-gap: 24px;
+  }
+}
+.preloader-cs-listing-page .bold-1 {
+  width: 97%;
+  margin-bottom: 24px;
+}
+.preloader-cs-listing-page .narrow-1 {
+  margin-bottom: 20px;
+}
+.preloader-cs-listing-page .bold-2 {
+  margin-bottom: 18px;
+}
+.preloader-cs-listing-page .card-block {
+  height: 347px;
+}
+.preloader-cs-listing-page .filter-block {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .filter-block {
+    height: 853px;
+    display: block;
+  }
+}
+.preloader-cs-listing-page .mobile-block {
+  display: grid;
+  margin-bottom: 28px;
+  margin-top: 48px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .mobile-block {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .mobile-cards {
+  display: grid;
+  padding-bottom: 28px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .mobile-cards {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .ipad-cards {
+  display: none;
+  padding-bottom: 28px;
+  margin-top: 64px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .ipad-cards {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-cs-listing-page .ipad-cards {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .filter-div {
+  display: none;
+  margin-bottom: 28px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .filter-div {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-cs-listing-page .filter-div {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .filter-top {
+  margin-bottom: 24px;
+}
+.preloader-cs-listing-page .desktop-cards {
+  display: none;
+  padding-bottom: 48px;
+  margin-top: 64px;
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-cs-listing-page .desktop-cards {
+    display: grid;
+  }
+}
+.preloader-cs-listing-page .pagination-block {
+  padding-bottom: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .pagination-block {
+    margin-top: 28px;
+  }
+}
+.preloader-cs-listing-page .page-block {
+  width: 40px;
+  height: 40px;
+  margin: 0 5px;
+}
+
+.ppc-skeleton-preloader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: #F3F3F3;
+}
+.ppc-skeleton-preloader .dots-loader {
+  color: var(--Green-6, #33A13C);
+  width: 4px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
+  transform: translateX(-38px);
+  animation: dotsAnimation 0.5s infinite alternate linear;
+}
+@keyframes dotsAnimation {
+  50% {
+    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
+  }
+  100% {
+    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
+  }
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;