app.css

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

@layer base {
  html,
  body {
    @apply h-full;
  }

  html {
    --bg: transparent;
    --bg-dark: transparent;
    --header: transparent;
    --header-dark: transparent;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    background: var(--bg);
  }

  .dark body {
    background: var(--bg-dark);
  }

  *,
  ::before,
  ::after {
    /* Auto direction for text */
    unicode-bidi: plaintext;
  }
}

@layer utilities {
  /*
    Disable CSS transitions. Apply to the html tag as a class
    https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily
  */
  .not-ready * {
    @apply !transition-none;
  }

  .btn-menu::before,
  .btn-menu::after {
    @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
  }

  .open {
    @apply overflow-hidden;
  }

  .open .btn-menu::before {
    @apply w-6 translate-y-[5.5px] rotate-45;
  }

  .open .btn-menu::after {
    @apply w-6 -translate-y-[5.5px] -rotate-45;
  }

  article {
    @apply text-lg;
  }

  .header {
    background-color: var(--header);
  }

  .dark .header {
    background: var(--header-dark);
  }

  .blur-header {
    @apply bg-black/10 backdrop-blur
  }

  .block-bg {
    @apply bg-black/[3%]
  }

  .block-hover {
    @apply hover:bg-black/[5%]
  }

  .block-hover-mask {
    @apply hover:bg-black/[2%]
  }

  .primary-link {
    @apply bg-transparent border-none hover:underline hover:decoration-4 hover:decoration-[#BECA9A]
  }

  .secondary-link {
    @apply bg-transparent border-none hover:underline hover:decoration-2 hover:decoration-[#BECA9A]
  }
}