public/assets/scss/_overrides.scss

.navbar-link.is-active,
.navbar-link:focus,
.navbar-link:hover,
a.navbar-item.is-active,
a.navbar-item:focus,
a.navbar-item:hover {
  background-color: $black;
  color: $white;
}
a.navbar-item, .navbar-link {
  font-size: $nav-link-size;
}
footer.pagefooter a,
footer.pagefooter a:hover {
  color: $grey-light !important;
}
.button.is-outlined {
  border-color: $grey !important;

  &:hover {
    background-color: $grey-lighter !important;
  }
}
button.has-text-light svg,
footer.pagefooter svg {
  fill: $grey-light;
}
.card.is-equal-height {
  height: 100%;
  display: flex;
  flex-direction: column
}
.card.is-equal-height .card-content {
  height: 100%
}
.card.is-equal-height .card-footer {
  margin-top: auto
}
.has-box-outline {
  outline: 1px solid lighten($grey-light, 15%);
}
.has-box-hover {
  &:hover {
    outline: 1px solid $grey-light;
  }
}
.tag.is-outlined {
  border: 1px solid $grey !important;
}

.columns.homepage-topics {
  border-radius: $radius-large * 2;
  padding: $notification-padding;
  background-color: #190E3D;

  .column {
    border: 1px solid #7668F8;
    border-radius: $radius-large * 2;
    background: rgb(66,38,162);
    background: linear-gradient(90deg, rgba(66,38,162,1) 0%, rgba(45,25,109,1) 100%);

    figure {
      border-radius: $radius-large;
      overflow: hidden;
    }

    &:hover {
      outline: 2px solid #7668F8;
      background: rgb(77,44,190);
      background: linear-gradient(90deg, rgba(77,44,190,1) 0%, rgba(56,32,138,1) 100%);
    }
  }
}

.is-16by9 i { /* ResourceCard with icon */
  bottom: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 24%;

  @include touch {
    top: 24%;
  }
  @include desktop-only {
    top: 16%;
  }
  @include widescreen {
    top: 24%;
  }

  &.fa-5x {
    @include touch {
      font-size: 8em;
    }
  }
}
.menu-list.on-this-page a {
  border-left: 2px solid $grey-light;
}
.menu-list.on-this-page a.is-active {
  border-left: 4px solid $blue;
}
a.navbar-item:focus-within {
  background-color: $black;
  color: $white;
}
.navbar-link:focus-within {
  background-color: $black;
  color: $white;
}
.navbar-secondary {
  border-bottom: 1px solid $grey-light;
  z-index: 0;
}
.navbar-secondary .navbar-burger a:hover,
.navbar-secondary .navbar-end a:hover,
.navbar-secondary a.navbar-item:focus {
  background-color: $white;
  color: $primary;
}

.navbar-secondary .navbar-brand a {
  color: $grey-darker;
}
.navbar-secondary .navbar-brand a:hover {
  color: $grey-darker;
  background-color: $white;
}
.image.is-cover-top img {
  object-fit: cover;
  object-position: top;
}
.image.is-contained img {
  object-fit: contain;
}
.navbar-item img.logo {
  margin-top: -4px;
}

a.link-external:after {
  content: " \2197";
  display: inline;
}

/* Fix Bulma + Prism conflicts */
.token.number, .token.tag { all: inherit; }

/* Clamp (inspired by https://blog.jetbrains.com/) */
.clamp {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;

  &.clamp-1 {
    -webkit-line-clamp: 1;
  }
  &.clamp-2 {
    -webkit-line-clamp: 2;
  }
  &.clamp-3 {
    -webkit-line-clamp: 3;
  }
  &.clamp-4 {
    -webkit-line-clamp: 4;
  }
  &.clamp-5 {
    -webkit-line-clamp: 5;
  }

  /* Hack to make clamp work on Safari */
  & > a.tag {
    margin-right: 0 !important;
  }
}

/* Inspired by https://getbootstrap.com/docs/5.3/helpers/stretched-link/ */
.has-position-relative {
  position: relative;
}
.is-stretched-link {
  &::#{after} {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
  }
}

/* Glows and gradients from https://rescui.dev/components/use-glow-hover/presets/ */
.has-glow-magenta {
  background: radial-gradient(circle, rgb(255, 69, 237) 12%, rgba(255, 69, 237, 0)) no-repeat border-box border-box rgb(8, 124, 250);
}
.has-glow-pink {
  background: radial-gradient(circle, rgb(228, 74, 144) 12%, rgba(228, 74, 144, 0)) no-repeat border-box border-box rgb(103, 92, 233);
}
.has-glow-fresh-green {
  background: radial-gradient(circle, rgb(117, 214, 75) 12%, rgba(117, 214, 75, 0)) no-repeat border-box border-box rgb(40, 184, 160);
}
.has-glow-cold-green {
  background: radial-gradient(circle, rgb(59, 234, 98) 12%, rgba(59, 234, 98, 0)) no-repeat border-box border-box rgb(8, 124, 250);
}
.has-glow-orange {
  background: radial-gradient(circle, rgb(253, 182, 13) 12%, rgba(253, 182, 13, 0)) no-repeat border-box border-box rgb(255, 49, 140);
}
.has-glow-red {
  background: radial-gradient(circle, rgb(221, 18, 101) 12%, rgba(221, 18, 101, 0)) no-repeat border-box border-box rgb(247, 103, 7);
}
.has-glow-purple {
  background: radial-gradient(circle, rgb(107, 87, 255) 12%, rgba(107, 87, 255, 0)) no-repeat border-box border-box rgb(40, 184, 160);
}

@property --glow-purple-transparent-percentage {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 65%;
}

@keyframes glow-purple-transparent-percentage-animation {
  to {
    --glow-purple-transparent-percentage: 40%;
  }
}
.has-glow-purple-transparent {
  background: radial-gradient(at top right, rgb(80, 40, 208) 5%, rgba(0, 0, 0, 0) var(--glow-purple-transparent-percentage));
  animation: glow-purple-transparent-percentage-animation 8s ease-in-out infinite alternate;
}

.has-gradient-magenta {
  background: linear-gradient(200deg, rgb(255, 69, 237) 12%, rgba(255, 69, 237, 0)) no-repeat border-box border-box rgb(8, 124, 250);
}
.has-gradient-pink {
  background: linear-gradient(200deg, rgb(228, 74, 144) 12%, rgba(228, 74, 144, 0)) no-repeat border-box border-box rgb(103, 92, 233);
}
.has-gradient-fresh-green {
  background: linear-gradient(200deg, rgb(117, 214, 75) 12%, rgba(117, 214, 75, 0)) no-repeat border-box border-box rgb(40, 184, 160);
}
.has-gradient-cold-green {
  background: linear-gradient(200deg, rgb(59, 234, 98) 12%, rgba(59, 234, 98, 0)) no-repeat border-box border-box rgb(8, 124, 250);
}
.has-gradient-orange {
  background: linear-gradient(200deg, rgb(253, 182, 13) 12%, rgba(253, 182, 13, 0)) no-repeat border-box border-box rgb(255, 49, 140);
}
.has-gradient-red {
  background: linear-gradient(200deg, rgb(221, 18, 101) 12%, rgba(221, 18, 101, 0)) no-repeat border-box border-box rgb(247, 103, 7);
}
.has-gradient-purple {
  background: linear-gradient(200deg, rgb(107, 87, 255) 12%, rgba(107, 87, 255, 0)) no-repeat border-box border-box rgb(40, 184, 160);
}
.has-text-shadow {
  text-shadow: 2px 2px 4px black;
}

.card-image .is-16by9 {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

#facetMenu label {
  color: #474749;
}

#facetMenu label:hover {
  background-color: $grey-lighter;
}

label.checkbox {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;

  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: inherit;
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border: 1px solid currentColor;
    transform: translateY(0.075em);

    display: grid;
    place-content: center;

    &::#{before} {
      content: "";
      width: 0.65em;
      height: 0.65em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      transform-origin: bottom left;
      transition: border-width .1s ease-out, border-color .1s ease-out;
      box-shadow: inset 1em 1em $white;
      background-color: CanvasText;
    }

    &:checked {
      background-color: $cyan;
      border-color: $cyan;

      &::#{before} {
        transform: scale(1) rotate(10deg) translateX(-0.05em) translateY(-0.03em);
      }
    }

    &:disabled {
      color: $grey-lighter;
      cursor: not-allowed;
    }
  }
}