Vizzuality/landgriffon

@tailwind base;
@tailwind components;
@tailwind utilities;

@-webkit-keyframes autofill {
  0%,
  100% {
    color: #666;
    background: transparent;
  }
}

@layer base {
  html {
    font-family: 'Public Sans', system-ui, sans-serif;
  }

  body {
    @apply antialiased text-gray-900;
  }

  /* Geomanist */
  @font-face {
    font-family: 'Geomanist';
    src: url('/fonts/Geomanist-Medium.woff2') format('woff2'),
      url('/fonts/Geomanist-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'Geomanist';
    src: url('/fonts/Geomanist-Black.woff2') format('woff2'),
      url('/fonts/Geomanist-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 0s 60000s, color 0s 60000s;
  }
  input[data-autocompleted] {
    background-color: transparent !important;
  }
}

@layer utilities {
  /* We want a blur effect without having a high opacity background, but we still want the
  background to be visible for the browsers that don't support backdrop-filter, so we double the
  background opacity. This can be tested on Firefox. */
  .bg-blur {
    @apply bg-opacity-40;
  }

  @supports (backdrop-filter: blur(4px)) {
    .bg-blur {
      @apply bg-opacity-20;
      backdrop-filter: blur(4px);
    }
  }
}

/* Overriding styles */
@layer components {
  div[data-testid='blog-card-item'] p > em {
    @apply not-italic;
  }
  div[data-testid='blog-card-item'] p > strong {
    @apply font-bold text-white;
  }
  div[data-testid='blog-card-item'] p > a {
    @apply underline text-white;
  }
}