39948-vm/frontend/src/css/main.css

@import "tailwind/_base.css";
@import "tailwind/_components.css";
@import "tailwind/_utilities.css";
@import 'intro.js/introjs.css';
@import "_checkbox-radio-switch.css";
@import "_progress.css";
@import "_scrollbars.css";
@import "_table.css";
@import "_helper.css";
@import '_calendar.css';
@import '_select-dropdown.css';
@import "_theme.css";
@import '_rich-text.css';

 
.introjs-tooltip {
  @apply min-w-[400px] max-w-[480px] p-2 !important;
}

.good-img {
  @apply -mt-96 !important;
}
.end-img {
  @apply -mt-72 !important;
}
.introjs-button {
  @apply bg-blue-600 text-white  !important;
  text-shadow: none !important;
}
.introjs-bullets ul li a.active {
  @apply bg-blue-600  !important;
}
.introjs-prevbutton{
  @apply bg-transparent border border-blue-600 text-blue-600 !important;
}

/* Page crossfade animation keyframes - Safari optimized */
@-webkit-keyframes page-crossfade-in {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes page-crossfade-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes page-crossfade-out {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes page-crossfade-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

/* Crossfade animation classes - GPU accelerated for Safari */
.animate-crossfade-in {
  /* Explicit initial state prevents Safari flash during animation setup */
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: page-crossfade-in 300ms ease-out forwards;
  animation: page-crossfade-in 300ms ease-out forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Only animate opacity - transform is for GPU layer promotion */
  will-change: opacity;
}

.animate-crossfade-out {
  /* Explicit initial state prevents Safari flash during animation setup */
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: page-crossfade-out 300ms ease-out forwards;
  animation: page-crossfade-out 300ms ease-out forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Only animate opacity - transform is for GPU layer promotion */
  will-change: opacity;
}

/* Safari-specific GPU compositing optimization */
@supports (-webkit-touch-callout: none) {
  .animate-crossfade-in,
  .animate-crossfade-out {
    /* Force GPU layer creation in Safari */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* Prevent Safari from optimizing away the GPU layer */
    -webkit-perspective: 1000;
    perspective: 1000;
  }
}

/* Element appear animation keyframes - Safari optimized */
@-webkit-keyframes element-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes element-fade-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes element-slide-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes element-slide-up {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes element-slide-down {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes element-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes element-slide-left {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes element-slide-left {
  from {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes element-slide-right {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes element-slide-right {
  from {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes element-scale-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes element-scale-in {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Instrument Sans font utilities */
.font-instrument-condensed {
  font-family: 'Instrument Sans Variable', sans-serif;
  font-stretch: 75%;
}

.font-instrument {
  font-family: 'Instrument Sans Variable', sans-serif;
  font-stretch: 100%;
}