Website/css/src/style.scss

@import 'fonts';
@import 'colors';

* {
  padding: 0;
  margin: 0;

  box-sizing: border-box;

  scrollbar-color: $colorPrimary $colorSurfaceLight1;

  @media (prefers-color-scheme: dark) {
    scrollbar-color: $colorPrimary $colorSurfaceDark1;
  }
}

*::selection {
  background: rgba($colorPrimary, 0.75);

  @media (prefers-color-scheme: dark) {
    background: rgba($colorPrimary, 0.65);
  }
}

body {
  display: flex;
  flex-direction: column;

  min-height: 100svh;

  background: $colorSurfaceLight1;
  color: $colorTextLight1;

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark1;
    color: $colorTextDark1;
  }
}

main {
  padding: 1.5rem 0;

  flex: 1 1;
}

a {
  color: $colorPrimary;

  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

button {
  cursor: pointer;
}

ol, ul {
  list-style-position: inside;

  margin-left: 1rem;
}

pre {
  overflow-x: scroll;

  max-width: 100%;

  display: block;

  padding: 1rem;

  background: $colorSurfaceLight2;

  border: 1px solid $colorBorderLight1;
  border-radius: .5rem;

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark2;
    border-color: $colorBorderDark1;
  }
}

.container {
  max-width: 1100px;

  margin: 0 auto;

  @media (max-width: 1100px) {
    margin: 0 1rem;
  }
}

.pageHero {
  height: 220px;

  background-image: url("https://crss.fra1.cdn.digitaloceanspaces.com/img/2024-06-08_14.19.52.png");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  font-family: 'Comic Neue', 'Comic Sans MS', 'Noto Color Emoji', 'Noto Emoji', sans-serif;
  font-weight: 600;

  > .heroOverlay {
    background: rgba($colorSurfaceLight2, 0.9);

    backdrop-filter: blur(8px);

    height: 100%;
    width: 100%;

    > .container {
      height: 100%;

      display: flex;

      align-items: center;
      justify-content: space-between;

      > div:first-child {
        display: flex;

        flex-direction: column;

        gap: 0.5rem;

        > h1 {
          font-family: 'Comic Neue', 'Comic Sans MS', 'Noto Color Emoji', 'Noto Emoji', sans-serif;
          font-weight: 600;
          font-size: 1.5rem;

          margin: 0;
        }

        @media (max-width: 768px) {
          align-items: center;
          justify-content: center;

          width: 100%;
          height: 100%;
        }
      }

      > div:last-child {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0.5rem;

        > input {
          background: rgba(0,0,0,0);

          width: fit-content;

          padding: 4px 16px;

          font-size: 1.5rem;

          text-align: center;

          color: inherit;

          border: 1px solid rgba(0, 0, 0, 0);
          border-radius: 1rem;

          transition: 150ms;

          &:focus, &:hover {
            outline: none;

            background: rgba($colorSurfaceLight4, .65);

            border: 1px solid $colorBorderLight3;
          }

          @media (prefers-color-scheme: dark) {
            color: inherit;

            &:focus, &:hover {
              background: rgba($colorSurfaceDark4, .65);

              border: 1px solid $colorBorderDark3;
            }
          }
        }

        @media (max-width: 768px) {
          display: none;
        }
      }
    }

    @media (prefers-color-scheme: dark) {
      background: rgba($colorSurfaceDark2, 0.9);
    }
  }

  @media (max-width: 768px) {
    border-bottom: 1px solid $colorBorderLight1;

    @media (prefers-color-scheme: dark) {
      border-color: $colorBorderDark1;
    }
  }
}

.navBar {
  height: 64px;

  position: sticky;

  top: 0;

  left: 0;
  right: 0;

  background: $colorSurfaceLight3;

  border-bottom: 1px solid $colorBorderLight1;

  z-index: 999999999;

  > .container {
    display: flex;

    justify-content: space-between;
    align-items: center;

    height: 100%;

    @media (max-width: 768px) {
      justify-content: space-between;
    }

    > .navMobileContainer {
      display: none;

      width: 100%;
      height: 100%;

      justify-content: end;
      align-items: center;

      z-index: 10000;

      > .navToggle {
        padding: 0.5rem;

        background: none;

        border: none;
        border-radius: 50%;

        display: flex;

        color: $colorTextLight1;

        transition: 150ms;

        &:hover {
          background: rgba($colorPrimary, 0.5);
        }

        @media (prefers-color-scheme: dark) {
          color: $colorTextDark1;
        }
      }

      @media (max-width: 768px) {
        display: flex;
      }
    }

    > .navCollapse {
      display: flex;

      justify-content: space-between;
      align-items: center;

      height: 100%;
      width: 100%;

      z-index: 5000;

      > ul {
        list-style: none;

        display: flex;

        align-items: center;
        gap: .5rem;

        margin: 0;

        > li {
          > a, .dropDown > label {
            padding: 8px 16px;

            display: flex;

            flex-direction: row;

            align-items: center;
            gap: 1rem;

            text-decoration: none;

            transition: 150ms;

            border-radius: 2rem;

            color: $colorTextLight2;

            outline: 2px solid rgba(0, 0, 0, 0);

            > .icon {
              width: 20px;
              height: 20px;
            }

            &:hover, &.active {
              outline: 2px solid rgba($colorPrimary, 0.65);

              color: $colorPrimary;
            }

            @media (prefers-color-scheme: dark) {
              color: $colorTextDark2;

              &:hover, &.active {
                outline-color: rgba($colorPrimary, 0.65);
              }
            }
          }
        }
      }

      @media (max-width: 768px) {
        opacity: 1;

        transition: 300ms;

        position: fixed;

        height: 100vh;
        width: 100vw;

        top: 0;
        right: -110%;

        display: flex;

        flex: 1;
        flex-direction: column;

        align-items: end;
        justify-content: center;

        gap: 2rem;

        padding: 1rem;

        background: rgba($colorSurfaceLight3, 0.95);
        backdrop-filter: blur(8px);

        ul {
          flex-direction: column;

          align-items: end;

          gap: 1rem;

          li {
            a {
              padding: 8px 24px;
            }
          }
        }

        @media (prefers-color-scheme: dark) {
          background: rgba($colorSurfaceDark3, 0.95);
        }
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark3;

    border-color: $colorBorderDark1;
  }

  &.navOpen {
    > .container {
      flex-direction: column;

      > .navMobileContainer {
        height: 64px;
      }

      > .navCollapse {
        opacity: 1;

        right: 0;
      }
    }
  }

  @media (max-width: 768px) {
    background: none;

    position: fixed;

    top: 0;

    border: none;
  }
}

.dropDown {
  position: relative;

  > label {
    display: flex;

    align-items: center;
    gap: 8px;

    cursor: pointer;

    padding: 8px 24px;
  }

  > .dropDownMenu {
    position: absolute;

    top: calc(100% + 4px);
    right: 0;

    background: $colorSurfaceLight4;

    border: 1px solid $colorBorderLight1;
    border-radius: .5rem;

    overflow: hidden;

    display: none;

    min-width: max(100%, 200px);

    > ul {
      list-style: none;

      display: flex;

      flex-direction: column;

      margin: 0;

      > li {
        > a {
          padding: 11px 24px;

          display: flex;

          flex-direction: row;

          align-items: center;
          gap: 24px;

          text-decoration: none;

          transition: 150ms;

          > .icon {
            width: 20px;
            height: 20px;
          }

          &:hover {
            background: rgba($colorPrimary, 0.65);

            color: $colorSurfaceLight1;
          }
        }

        > .divider {
          border-bottom: 1px solid $colorBorderLight1;

          width: 100%;

          @media (prefers-color-scheme: dark) {
            border-color: $colorBorderDark1;
          }
        }
      }
    }

    @media (prefers-color-scheme: dark) {
      border-color: $colorBorderDark1;
      background: $colorSurfaceDark4;
    }
  }

  &.open {
    > label {
      outline: 2px solid rgba($colorPrimary, 0.65);

      color: $colorPrimary;
    }

    > .dropDownMenu {
      display: block;
    }
  }
}

.pageContent {

}

.pageFooter {
  background: $colorSurfaceLight3;

  border-top: 1px solid $colorBorderLight1;

  > .container {
    display: flex;

    justify-content: space-between;

    align-items: start;

    padding: 1rem 0;

    p {
      margin-bottom: .5rem;
    }

    div:first-child {
      width: 420px;
    }

    div:last-child {
      text-align: right;

      > ul {
        display: flex;

        gap: 1rem;

        list-style: none;

        > li {
          > a {
            display: flex;

            align-items: center;
            justify-content: center;

            width: 31px;
            height: 31px;

            border-radius: 50%;

            padding: 4px;

            transition: 150ms;

            color: $colorTextLight1;

            &:hover {
              color: $colorTextLight2;
            }

            @media (prefers-color-scheme: dark) {
              color: $colorTextDark1;

              &:hover {
                color: $colorTextDark2;
              }
            }
          }
        }
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark3;

    border-color: $colorBorderDark1;
  }
}

.teamList {
  display: grid;

  gap: 1rem;

  grid-template-columns: repeat(3, minmax(200px, 1fr));

  > .teamCard {
    border: 1px solid $colorBorderLight1;
    border-radius: 1rem;

    background: $colorSurfaceLight2;

    > .memberBanner {
      height: 150px;

      position: relative;

      background: $colorPrimary;

      border-top-left-radius: calc(1rem - 1px);
      border-top-right-radius: calc(1rem - 1px);

      > img {
        position: absolute;

        bottom: -52px;
        left: 16px;

        border-radius: 1rem;
        border: 4px solid $colorSurfaceLight2;

        @media (prefers-color-scheme: dark) {
          border-color: $colorSurfaceDark2;
        }
      }

      &[data-has-background] {
        background: var(--background);
      }
    }

    > .memberContent {
      padding: 0 1rem 1rem;

      > h3 {
        margin: 0;
      }

      > .memberLinks {
        display: flex;

        justify-content: end;
        align-items: end;

        gap: .5rem;

        list-style: none;

        margin: 1rem 0 .5rem;

        > li > a {
          display: flex;

          align-items: center;

          padding: 4px;

          color: $colorBorderLight3;

          &:hover {
            color: $colorPrimary;
          }

          @media (prefers-color-scheme: dark) {
            color: $colorBorderDark3;
          }
        }
      }
    }

    @media (prefers-color-scheme: dark) {
      border-color: $colorBorderDark1;

      background: $colorSurfaceDark2;
    }
  }
}