app.scss

@import "@/assets/graph.scss";

/** Gradients **/
.supercharge__gradient {
  display: inline-block;
  background: linear-gradient(
    90deg,
    #f5a50f 0%,
    #d19321 25%,
    #fceb01 50%,
    #d19321 75%,
    #e6f148 100%
  );
  // animate gradient
  background-size: 200% auto;
  animation: gradient 3s ease-in-out infinite;

  // slight shadow to make it pop out
  filter: drop-shadow(2px 2px 0px rgb(5, 5, 5));
  // solid shadow though
  // animation keyframes
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 1.5em;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.smaller__gradient {
  // Blue gradient.
  background: linear-gradient(
    90deg,
    #f5a50f 0%,
    #d19321 25%,
    #fceb01 50%,
    #d19321 75%,
    #e6f148 100%
  );
  // animate gradient
  background-size: 200% auto;
  animation: gradient 3s ease-in-out infinite;

  // slight shadow to make it pop out
  filter: drop-shadow(2px 2px 0px rgb(0, 0, 0));
  // solid shadow though
  // animation keyframes
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 1.25em;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  /*margin-right: 0.5rem;*/
}

// Make gradient text smaller on mobile.
@media (max-width: 999px) {
  .supercharge__gradient {
    font-size: 1.1em;
  }
}

.content {
  background-color: transparent !important;
}

.download-card {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.markdown-body a,
.link-rows a {
  color: var(--color-brand) !important;
}

html.dark .markdown-body a,
html.dark .link-rows a  {
  color: var(--color-brand-dark) !important;
}

.markdown-body p {
  line-height: 1.5;
  padding: 0;
}

.feature-block h1{
  padding-top: 0.5em;
}

.centered-hero {
  // Center everything along a column.
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  align-items: center;

  // Make icon big.
  svg {
    width: 5rem;
    height: 5rem;
  }

  iframe {
    // Ratio: (1120px by 630px) / 2
    width: 70em;
    height: 39.375em;
    max-width: 100%;
    border-radius: var(--gap-xl);
  }
}

.subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-base);
}

a { 
  color: var(--color-brand); text-decoration: none; 
}
html.dark a {
  color: var(--color-brand-dark);
}

a:hover { 
  text-decoration: underline; 
}

// Workarounds for Omorphia 0.9.5

.light{
  --color-bg: #e5e7eb;
}

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