vbv/client/tailwind.css

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html {
  @apply text-black;
}

body {
  hyphens: auto;
}

.default-wagtail-rich-text h3 {
  margin-bottom: 1em;
  margin-top: 1em;
}

.default-wagtail-rich-text p {
  margin-bottom: 0.5em;
}

.default-wagtail-rich-text a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.default-wagtail-rich-text ul {
  list-style-type: disc;
  margin-left: 24px;
}

.default-wagtail-rich-text ol {
  list-style-type: decimal;
  margin-left: 24px;
}

svg {
  @apply fill-current;
}

button,
input,
textarea {
  font-feature-settings: "salt";
}

@layer base {
  .it-icon {
    @apply inline-block h-8 w-8;
  }

  h1 {
    @apply text-4xl font-bold md:text-5xl xl:text-7xl;
    font-feature-settings: normal;
  }

  .heading-1 {
    @apply text-4xl font-bold md:text-5xl xl:text-7xl;
    font-feature-settings: normal;
  }

  h2 {
    @apply text-2xl font-bold md:text-3xl xl:text-4xl;
  }

  .heading-2 {
    @apply text-2xl font-bold md:text-3xl xl:text-4xl;
  }

  h3 {
    @apply text-xl font-bold xl:text-2xl;
  }

  .heading-3 {
    @apply text-xl font-bold xl:text-2xl;
  }

  .link {
    @apply cursor-pointer underline underline-offset-2;
  }

  .link-large {
    @apply text-lg underline xl:text-xl;
  }

  .text-large {
    @apply text-lg xl:text-xl;
  }

  .text-bold {
    @apply text-base font-bold;
  }

  .container-medium {
    @apply mx-auto w-full max-w-5xl px-4 py-4 lg:px-8;
  }

  .container-large {
    @apply mx-auto w-full max-w-6xl px-4 py-4 lg:px-8;
  }

  .filter-blue-900 {
    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%)
      contrast(105%);
  }
}

@layer components {
  .circle-title {
    @apply text-9xl font-bold;
  }

  .btn-primary {
    @apply inline-block border-2 border-blue-900 bg-blue-900 px-4 py-2 align-middle font-semibold text-white hover:border-blue-700 hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-secondary {
    @apply inline-block border-2 border-blue-900 bg-transparent px-4 py-2 align-middle font-semibold text-blue-900 hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-blue {
    @apply inline-block border-2 border-sky-500 bg-sky-500 px-4 py-2 align-middle font-semibold text-blue-900 hover:border-sky-400 hover:bg-sky-400 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-text {
    @apply inline-block px-4 py-2 align-middle font-normal text-blue-900 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-large-icon {
    @apply flex items-center px-6 py-3 text-xl font-bold;
  }

  .circle-numbered-list {
    @apply my-8 list-outside list-decimal list-none pl-0;
    counter-reset: list-counter;
  }

  .circle-numbered-list li {
    @apply relative mb-8 pl-10;
    counter-increment: list-counter;
  }

  .circle-numbered-list li:last-of-type {
    @apply mb-0;
  }

  .circle-numbered-list li::before {
    content: counter(list-counter);
    @apply absolute left-0 flex h-6 w-6 items-center justify-center rounded-full border border-gray-500 text-sm;
    top: 1rem;
    transform: translateY(-50%);
  }

  .tag-inactive {
    @apply rounded-full border-2 border-blue-900 px-4 py-2 font-semibold text-blue-900;
  }

  .tag-active {
    @apply rounded-full bg-blue-900 px-4 py-2 font-semibold text-white;
  }

  .nav-item {
    @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
  }

  .nav-item-no-mobile {
    @apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
  }

  .nav-item--active {
    @apply border-sky-500;
  }
}

@layer utilities {
  .no-scroll {
    height: 100vh;
    overflow: hidden;
  }

  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}