joinmastodon/styles/globals.scss

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

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 100 900;

  src:
    url("/fonts/manrope-variable.woff2") format("woff2 supports variations"),
    url("/fonts/manrope-variable.woff2") format("woff2-variations");
}

@layer base {
  :root {
    --header-area: calc(var(--header-offset) + var(--header-height));
    @apply [--header-offset:0rem] md:[--header-offset:1.5rem];
    @apply [--header-height:5.625rem] md:[--header-height:6rem];
    @apply [--gutter-width:1rem] md:[--gutter-width:1.25rem];
    @apply [--footer-offset:14rem] md:[--footer-offset:MAX(20vw,16rem)];
  }

  html {
    overflow-x: hidden;
    font-size: 16px;
  }
}

@layer utilities {
  .h1 {
    @apply text-h3 md:text-h1;
    @apply leading-h3 md:leading-h1;
    @apply font-extrabold tracking-normal;
  }

  .h2 {
    @apply text-h4 md:text-h2;
    @apply leading-h4 md:leading-h2;
    @apply font-extrabold tracking-normal;
  }

  .h3 {
    @apply text-h4 md:text-h3;
    @apply leading-h4 md:leading-h3;
    @apply font-extrabold tracking-normal;
  }

  .h4 {
    @apply text-h5 md:text-h4;
    @apply leading-h5 md:leading-h4;
    @apply font-extrabold tracking-semiwide md:tracking-normal;
  }

  .h5 {
    @apply text-h6 md:text-h5;
    @apply leading-h6 md:leading-h5;
    @apply font-extrabold tracking-semiwide;
  }

  .h6 {
    @apply text-h6;
    @apply leading-h6;
    @apply font-extrabold tracking-semiwide;
  }

  .sh1 {
    @apply text-b1 md:text-sh1;
    @apply leading-b1 md:leading-sh1;
    @apply font-extranormal tracking-semiwide;
  }

  .b1,
  .b2,
  .b3,
  .b4 {
    b,
    strong {
      @apply font-bold;
    }
  }

  .b1 {
    @apply text-b1;
    @apply leading-b1;
    @apply font-extranormal tracking-semiwide;
  }

  .b2 {
    @apply text-b2;
    @apply leading-b2;
    @apply font-extranormal tracking-semiwide;
  }

  .b3 {
    @apply text-b3;
    @apply leading-b3;
    @apply font-extranormal tracking-semiwide;
  }

  .b4 {
    @apply text-b4;
    @apply leading-b4;
    @apply font-normal tracking-semiwide;
  }

  .c2 {
    @apply text-c2;
    @apply leading-c2;
    @apply font-bold tracking-semiwide;
  }

  .c3 {
    @apply text-c3;
    @apply leading-c3;
    @apply font-extranormal tracking-semiwide;
  }

  .full-width-bg {
    margin-inline: calc(50% - 50vw);

    &__inner {
      @apply mx-auto w-full max-w-site px-6 lg:px-16;
    }
  }

  .carousel__dot {
    @apply mr-2 rounded-[50%] bg-gray-3 p-2;
  }

  .carousel__dot.carousel__dot--selected {
    @apply bg-blurple-500;
  }
}