somos-infinitos-theme/assets/scss/static.scss

:root {
  --background: #040810;
  --foreground-text: #FAF7EF;
  --bg-accent: #8E9AEC; /* add 99 at the end for constellation, and 0/50% opacity for radial gradient */

  --font-family-serif: 'EB Garamond', serif;
  --font-family-mono: 'Jura', sans-serif;
  --font-family-sans: 'Sora', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
}

body {
  font-family: var(--font-family-sans);
  color: var(--foreground-text);
  margin: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 100%);
}

.container {
  max-width: 908px;
  margin-inline: auto;
}

a {
  color: var(--foreground-text);
}

h2 {
  font-family: var(--wp--preset--font-family--eb-garamond);
  font-size: 38px;
}

.btn {
  border: 1px solid;
  border-radius: 0.85em;
  padding: .75em 1.5em;
  text-decoration: none;
  font-size: 16px;

  &--solid {
    background-color: var(--foreground-text);
    color: var(--background);
  }
}

.site-navigation {
  display: flex;
  justify-content: space-between;
  padding: 50px;
  font-family: var(--font-family-mono);
  font-weight: 700;
  text-transform: uppercase;
  align-items: center;
 
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  ul.pages-list {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    gap: 2em;
    margin: 0;
    padding: 0;
  }
  
  .action-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
  }
}

section {
  padding-block: 82px;
}

.hero--container {
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  
  .hero--text {
    grid-column: 2 / 4;

    h2 {
      font-family: var(--wp--preset--font-family--eb-garamond);
      font-size: 38px;
      font-weight: 400;
      max-width: 385px;
    }

    p {
      font-family: var(wp--preset--font-family--sora);
      font-size: 18px;
      max-width: 446px;
    }
  }

  .hero--img {
    grid-column: 4 / 6;
    width: 100%;
    border: 1px solid white;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: none;
  }
}

.sponsor-logos {
  padding-block: 41px;
  .container {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1rem;
  }
}

section.pitch {
  padding-block: 82px;
  text-align: center;

  h2 {
    font-family: var(--wp--preset--font-family--eb-garamond);
    font-size: 38px;
    font-weight: 400;
    line-height: 100%;
    max-width: 527px;
    margin-inline: auto;
    margin-bottom: 54px;
  }

  .pitch--cards {
    display: grid;
    grid-template-columns: repeat(3, 300px);
    gap: 16px;

    .pitch--card-item {
      border: 1px solid #FAF7EF;
      border-radius: 12px;
      text-align: center;
      padding-block: 40px;
      padding-inline: 25px;
      // height: 244px;

      h3 {
        font-family: var(--wp--preset--font-family--sora);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.3;
      }

      p {
        font-family: var(--wp--preset--font-family--sora);
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
      }
    }
  }
}

section.book-club-examples {
  text-align: center;

  h2 {
    font-weight: 400;
    max-width: 563px;
    margin-inline: auto;
    line-height: 1;
  }

  .book-club-example-cards {
    padding-block: 84px;
    .book-club-example-card--item {
      display: flex;
      max-width: 908px;
      border: 1px solid var(--foreground-text);
      border-radius: 12px;
      margin-inline: auto;
      margin-block: 36px;
  
      &--img {
        border-radius: 12px;
        border-right: 1px solid #F6F6F8;
        object-fit: cover;
      }
  
      &--text {
        * { text-align: left; }
        padding-inline: 40px;
        padding-block: 36px;
        p { font-size: 18px; }
        strong { font-weight: 600; }
        &--description { font-size: 16px; }
      }
    }
  }

  .btn {
    display: inline-block;
    padding-inline: 5em;
    font-size: 16px;
  }
}

section.testimonial-section {
  h2 {
    text-align: center;
    font-weight: 400;
  }

  // TODO: turn this into a carousel
  .testimonial-cards {
    display: flex;
    gap: 1rem;
    padding-block: 84px;
    .testimonial-card--item {
      border: 1px solid var(--foreground-text);
      border-radius: 12px;
      padding: 64px;
      max-width: 446px;

      .bio {
        display: flex;
        gap: 1rem;
        padding-bottom: 32px;
        align-items: center;
        &--img {
          border-radius: 100%;
          border: 1px solid var(--foreground-text);
          width: 61px;
        }
        &--name {
          max-width: 12ch;
          font-weight: 600;
          font-size: 18px;
        }
      }

      &--description {
        font-size: 16px;
      }
    }
  }
}

section.faq {
  padding-block: 84px;
  h2 {
    text-align: center;
    font-weight: 400;
    margin-bottom: 3rem;
  }

  // TODO: animate the accordion https://css-tricks.com/how-to-animate-the-details-element/
  .faq-list {
    border: 1px solid white;
    border-radius: 12px;
    .faq--item {
      padding-inline: 60px;
      padding-inline-start: calc(60px - 16px);
      padding-block: 45px;
      border-bottom: 1px solid;
      &:last-of-type { border-bottom: none; }
      .answer {
        margin-top: 16px;
        padding-left: 16px;
        display: block;
      }
      summary {
        font-weight: 600;
        list-style-type: '+';
        span { margin-left: 16px; }
      }
    }

    .faq--item[open] summary {
      list-style-type: '-';
    }
  }
}

section.book-club-benefits {
  text-align: center;
  h2 {
    font-weight: 400;
  }

  .benefit-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    row-gap: 90px;
    margin-block: 140px;

    .benefit-card--item {
      img {
        max-width: 215px;
        border: 1px solid var(--foreground-text);
        border-radius: 12px;
      }
      p {
        max-width: 289px;
        margin-inline: auto;
        strong {
          font-weight: 600;
        }
      }
    }
  }

  .book-club-benefits-cta {
    .btn {
      padding-inline: 4em;
      display: inline-block;
    }
    p {
      font-size: 16px;
    }
  }
}