@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './article.css';
@import './no-scrollbars.css';
@import './logos.css';
@import './partners.css';

@layer base {
  body {
    @apply bg-black text-white antialiased;
  }
}

html {
  scroll-behavior: smooth;
}

.testimonials ul.slick-dots > li {
  width: initial;
  height: initial;
}

.testimonials .slick-list .slick-track {
  display: flex;
  align-items: center;
}

.testimonials li.slick-active > div {
  background-color: #ff371a;
  border: none;
}

.banner-pixels {
  @apply bg-center bg-repeat;

  background-image: url('/images/pixels.png');
  background-size: auto 40px;
}

@layer components {
  .container {
    @apply mx-auto w-full max-w-[1408px] px-8 sm:px-5;
  }

  .container-narrow {
    @apply mx-auto w-full max-w-[1216px] px-8 sm:px-5;
  }

  .container-wide {
    @apply mx-auto w-full max-w-[1706px] px-10 sm:px-5;
  }

  .card-border {
    @apply p-px;
    background-image: linear-gradient(
      180deg,
      #2a2a2d 0%,
      rgba(42, 42, 45, 0.5) 4.86%,
      rgba(42, 42, 45, 0.4) 16.55%
    );
  }

  .card-border-hover {
    @apply card-border overflow-hidden transition-all duration-200;

    & > a {
      @apply after:absolute after:inset-x-0 after:bottom-[-140px] after:z-0 after:mx-auto after:h-[160px] after:w-[260px] after:rounded-[100%] after:bg-primary-red after:opacity-0 after:blur-3xl after:transition-opacity after:duration-200;
    }

    &:hover {
      background-image: linear-gradient(
          180deg,
          #2a2a2d 0%,
          rgba(42, 42, 45, 0.5) 4.86%,
          rgba(42, 42, 45, 0.4) 16.55%
        ),
        radial-gradient(
          45.83% 45.83% at 50% 100%,
          rgba(255, 70, 43, 0.6) 0%,
          rgba(255, 70, 43, 0) 100%
        );

      & > a {
        @apply bg-[#131315] after:opacity-[0.24];
      }
    }
  }
}

@layer utilities {
  /*
    Handy CSS class to prevent Input background color becomes yellow in Chrome on autofill.
    Works as well with inputs with transparent background.

    https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
  */
  .remove-autocomplete-styles:-webkit-autofill,
  .remove-autocomplete-styles:-webkit-autofill:hover,
  .remove-autocomplete-styles:-webkit-autofill:focus {
    transition: background-color 50000s, color 600000s;
  }
}
