smooth-e.github.io/css/product.scss

---
---

:root {
  --floating-button-size: 75px;
}

#banner-container {

  * {
    transition-duration: 0.25s;
  }

  #banner-background-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--corner-radius-big);
    width: 100%;
    height: 100%;
    overflow: hidden;

    #banner-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      filter: blur(0px);
      z-index: 0;
    }

    #banner-dimmer {
      position: relative;
      background-color: rgba(0, 0, 0, 0.4);
      width: 100%;
      height: 100%;
      z-index: 2;
    }

  }

  #header-content {
    display: flex;
    flex-direction: row;

    * {
      position: relative;
      z-index: 2;
    }

    #group-divider {
      width: var(--margin);
      height: var(--margin);
    }

    #icon {
      width: 25%;
      aspect-ratio: 1 / 1;
      background-size: cover;
      background-position: center;
      border-radius: var(--corner-radius-big);
      margin-bottom: auto;
    }

    #group-right {
      color: white;
      width: 67%;
      display: flex;
      flex-direction: column;
      flex-grow: 1;

      #name {
        max-lines: 2;
        display: block;
        font-size: xxx-large;
        font-weight: bolder;
        letter-spacing: 0;
        line-height: 1em;
        padding-bottom: calc(var(--margin) / 2);
      }

      #description {
        padding-top: 0;
        padding-bottom: var(--margin);
      }

      #sources {
        display: flex;
        flex-direction: row-reverse;
        margin-top: auto;

        @keyframes source-slide-in {

          from {
            transform: translatex(-100px);
            opacity: 0;
          }

          to {
            transform: translateX(0px);
            opacity: 100%;
          }

        }

        .source-badge {
          margin-left: calc(var(--margin) / 2);
          border-radius: var(--corner-radius-small);
          animation: 1s ease forwards source-slide-in;
          opacity: 0;
          will-change: opacity, transform;
          width: auto;
          height: 30px;
          display: flex;
          flex-direction: row;
          padding: 10px;

          img {
            width: auto;
          }

          .source-name {
            text-align: center;
            margin-top: auto;
            margin-bottom: auto;
            transition: all ease 0.3s 0s;
            width: 0;
            overflow: hidden;
            font-size: large;
            color: #FFF0;
          }

        }

      }

    }

  }

}

.content * {
  max-width: 100%;
}

#floating-action-button {
  position: sticky;
  width: var(--floating-button-size);
  height: var(--floating-button-size);
  left: 100%;
  bottom: var(--margin);
  margin-right: var(--margin);
  margin-top: var(--margin);
  z-index: 100;
  display: flex;
  flex-direction: row-reverse;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: calc(var(--floating-button-size));
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: all 0.3s;

  #button-home {
    position: relative;
    width: var(--floating-button-size);
    height: var(--floating-button-size);
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;

    img {
      width: calc(var(--floating-button-size) - var(--margin) * 2);
      height: calc(var(--floating-button-size) - var(--margin) * 2);
      margin: var(--margin);
    }

    span {
      color: rgba(255, 255, 255, 0);
      font-size: 1.2em;
      margin-top: auto;
      margin-bottom: auto;
      transition: all 0.25s;
    }

    #icon-filled {
      position: absolute;
      z-index: 101;
      opacity: 0;
      transition: all 0.1s;
    }

  }

  #copyright-notice {
    display: none;
  }

  &[data-state="docked"] {
    width: calc(100% - 2 * var(--margin));
    border-radius: var(--corner-radius-small);

    @keyframes copyright-notice-appearance {

      0% {
        transform: translateX(-10px);
        opacity: 0;
        letter-spacing: 0;
      }

      100% {
        transform: translateX(0px);
        opacity: 1;
        letter-spacing: 0.1px;
      }

    }

    #copyright-notice {
      position: relative;
      display: block;
      margin: auto auto auto var(--margin);
      font-size: large;
      font-weight: 400;
      left: 0;
      animation: ease 0.5s forwards copyright-notice-appearance;
      animation-delay: 0.3s;
      opacity: 0;
    }

  }

}

@media screen and (any-hover: hover) {

  #banner-container:hover {

    #banner-background {
      top: calc(-1 * var(--margin)) !important;
      left: calc(-1 * var(--margin)) !important;
      width: calc(100% + var(--margin) * 2) !important;
      height: calc(100% + var(--margin) * 2) !important;
      filter: blur(7px) !important;
    }

    #icon {
      border-radius: var(--corner-radius-small) !important;
    }

    #group-right {

      #name {
        letter-spacing: 1.5px !important;
      }

      #description {
        padding-top: calc(var(--margin) / 2) !important;
        padding-bottom: calc(var(--margin) / 2) !important;
      }

      .source-badge:hover .source-name {
        width: 100px !important;
        color: #FFF !important;
      }

    }

  }

  #floating-action-button[data-state="floating"]:hover {
    border-radius: var(--corner-radius-small);
    width: calc(var(--floating-button-size) + 1.2em * 4);

    #button-home {
      width: calc(var(--floating-button-size) + 1.2em * 4);

      span {
        color: white;
        transition: all 1s;
      }

    }

  }

  #button-home:hover #icon-filled{
    opacity: 1 !important;
  }

}

@media screen and (max-width: 700px) {

  #banner-container {
    --the-width: calc((min(var(--top-level-card-max-width), 100vw) - 2 * var(--margin)) / 2);

    margin-top: calc(var(--margin) + var(--the-width) / 2);

    #header-content {
      flex-direction: column;
      align-items: center;
      padding-top: calc(var(--the-width) / 2 - var(--margin));

      &::after {
        content: "";
        display: block;
        background-color: var(--color-shadow);
        position: absolute;
        width: calc(var(--the-width) + var(--margin));
        height: calc(var(--the-width) + var(--margin));
        align-self: center;
        top: calc(var(--the-width) / -2);
        border-radius: var(--corner-radius-big);
        filter: blur(10px);
        transition: filter .1s ease;
        z-index: -100;
      }

      #icon {
        width: var(--the-width);
        position: absolute;
        top: calc(var(--the-width) / -2);
      }

      #group-right {
        width: 100%;
        align-items: center;

        #name, #description {
          width: 100%;
          text-align: center;
        }

      }

    }

  }

}