ihk24/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss

//@import "../../variables/wood";
//@import "../../variables/color-set";
//@import "../../variables/variables";

//@import "../components/mixins";
@import "../styles/mixins";
.magazine-header {
  position: sticky;
  display: block;
  height: 90px;
  top: var(--header-height);
  z-index: 99;
  font-size: 0;
  line-height: 0;
  text-align: center;
  pointer-events: none;
  margin-bottom: 10px;

  @media(max-width: 767px) {
    top: 80px;
    height: 70px;
    margin-bottom: 0;
  }
  @media(max-width: 359px) {
    top: 70px;
  }

  .gradient {
    @include full-size;
    background: linear-gradient(90deg, $color-gradient-01 10%, $color-gradient-02 55%, $color-gradient-03 90%);
    background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 10%, var(--theme-color-gradient-02, $color-gradient-02) 55%, var(--theme-color-gradient-03, $color-gradient-03) 90%);
    transform-origin: center top;
  }

  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center 7%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-size: 60px;
    color: white;
    line-height: 1;
    padding: 15px;
    font-weight: 400;
    text-decoration: none;
    pointer-events: all;

    @media(max-width: 999px) {
      font-size: 48px;
    }

    @media(max-width: 567px) {
      display: block;
      width: 100%;
      font-size: 32px;
    }
  }

  &.narrow .title {
    font-size: 36px;
  }

  img {
    display: block;
    width: auto;
    height: 75px;

    @media(max-width: 767px) {
      height: 56px;
      margin: 0 auto;
    }
  }

  &.narrow {
    height: 50px;

    img {
      height: 40px;
    }
  }
}

.magazine-start, .magazine-article {
  .page-header {
    @media(min-width: 1200px) {
      height: 100px;

      .logo img {
        height: 50px;
      }
    }

    &:not(.nav-open):before {
      box-shadow: none;
    }
  }

  @media(min-width: 1200px) {
    .page-wrapper {
      border-top: 100px solid #fff;
    }
  }

  a.teaser .kicker:first-child + .text-box h4, a.teaser .text-box:first-child h4 {
    @include h4;
    text-decoration-thickness: 0.07em;
    margin-top: 0.4em;
    margin-bottom: 0.4em;

    @media(min-width: 1000px) {
      @include h2;
      text-decoration-thickness: 0.07em;
      margin-top: 0;
    }
  }

  .teasers h2 {
    text-transform: uppercase;
    margin-left: 0;
    margin-right: 0;
    @include h4;
    margin-bottom: 1.2em;

    &:before {
      content: "";
      position: relative;
      display: block;
      background: linear-gradient(90deg, $color-gradient-01 10%, $color-gradient-02 55%, $color-gradient-03 90%);
      background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 10%, var(--theme-color-gradient-02, $color-gradient-02) 55%, var(--theme-color-gradient-03, $color-gradient-03) 90%);
      height: 4px;
      margin-bottom: 0.5em;
    }
  }
}

.magazine-start {
  .page-content > .teasers:first-child {
    @media(max-width: 767px) {
      margin-top: 10px;
    }
    @media(min-width: 768px) and (max-height: 999px) {
      margin-top: 30px;
    }
    @media(min-width: 768px) and (min-height: 1000px) {
      margin-top: 50px;
    }
  }

  .teasers[data-items="1"] {
    .kicker:first-child {
      margin-bottom: 0;
    }

    .text-box:first-child, .kicker:first-child ~ .text-box {
      position: relative;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
      padding-bottom: 44px;

      @media(max-width: 1199px) {
        padding-right: 20%;
      }
      @media(max-width: 767px) {
        padding-right: 0;
      }

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8px;
        transition: 0.3s ease;
        z-index: 1;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      ~ .reading-time {
        margin-bottom: 0;
      }
    }

    a:hover .text-box:after {
      height: 14px !important;
    }

    @media(min-width: 1000px) {
      .teaser {
        display: block;

        &:after {
          content: "";
          display: block;
          clear: left;
        }
      }

      .image-box {
        width: calc(50% - 20px);
        max-width: none;
        float: left;
        margin-right: 40px;

        @media(max-width: 1199px) {
          margin-right: 30px;
          width: calc(50% - 15px);
        }

        ~ .text-box {
          min-width: 0;
          max-width: calc(50% - 20px);
          float: left;

          @media(max-width: 1199px) {
            width: calc(50% - 15px);
          }
        }
        ~ .kicker {
          position: relative;
          margin: 0;
          display: inline-block;
          left: auto;
          max-width: calc(50% - 40px);
        }
      }

      &[data-image-size="l"] {
        .image-box {
          width: calc(66.66667% - 12px);

          @media(max-width: 1199px) {
            width: calc(66.66667% - 10px);
          }

          &:before {
            padding-top: 55%;
          }

          ~ .text-box, ~ .kicker {
            max-width: calc(33.33333% - 28px);

            @media(max-width: 1199px) {
              width: calc(33.33333% - 20px);
            }
          }
        }
      }

      &[data-image-size="s"] {
        .image-box {
          width: calc(41.66667% - 23px);
          min-width: 0;

          @media(max-width: 1199px) {
            width: calc(41.66667% - 18px);
          }

          &:before {
            padding-top: 100%;
          }

          ~ .text-box, ~ .kicker {
            max-width: calc(58.33333% - 17px);

            @media(max-width: 1199px) {
              width: calc(58.33333% - 12px);
            }
          }
        }
      }

      h4 {
        @include h2;
        text-decoration-thickness: 0.07em;
        margin-top: 0;
      }
    }
  }

  .teasers[data-items="2"], .teasers[data-items="3"], .teasers[data-items="4"] {
    .teaser {
      height: calc(100% + 12px);
    }
  }
}

.reading-time {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0;
  font-weight: 700;
  font-family: "Korb", sans-serif;
  text-transform: uppercase;
  margin: 8px;
  color: $color-primary;
  color: var(--theme-color-primary, $color-primary);
  transition: color 0.3s ease;
  z-index: 2;

  span {
    padding-left: 4px;
    font-size: 14px;
    line-height: 1.4;
    display: inline-block;
  }

  .value {
    background-color: $color-primary;
    background-color: var(--theme-color-primary, $color-primary);
    color: white;
    padding: 0 6px;
    transition: background-color 0.3s ease;
  }
}

a:hover .reading-time {
  color: $color-secondary-dark;
  color: var(--theme-color-secondary-intensed, $color-secondary-dark);

  .value {
    background-color: $color-secondary-dark;
    background-color: var(--theme-color-secondary-intensed, $color-secondary-dark);
  }
}

.magazine-article, .magazine-start {
  .teaser {
    .text-box:not(:last-child) {
      padding-bottom: 24px;
    }
  }

  .page-details {
    margin-bottom: 20px;
  }
}

.magazine-article {
  .row {
    justify-content: center;
  }
  .richtext .detail-text {
    overflow-x: visible;
  }

  article.col {
    position: relative;
    z-index: 1;
    max-width: 66.6667%;
    background-color: #fff;

    @media(max-width: 1199px) {
      max-width: 83.3333%;
    }
    @media(max-width: 999px) {
      box-shadow: 0 0 0 10px white;
    }
    @media(max-width: 767px) {
      max-width: 100%;
      box-shadow: 0 -4px 0 2px white;
    }
  }

  blockquote {
    border-left: 0;
    font-weight: 300;
    font-size: 48px;
    font-style: normal;
    margin: 1em 0 1.3em;
    padding: 0 40px;

    @media(max-width: 1199px) {
      font-size: 36px;
    }
    @media(max-width: 767px) {
      font-size: 28px;
      padding: 0 0 0 20px;
    }

    p:not(.author), div.text {
      line-height: 1.3;

      &:first-child:before {
        content: "";
        position: relative;
        display: block;
        width: 30px;
        height: 30px;
        background-image: url(../../assets/img/quote.svg);
        background-size: 100%;
        margin: 2px 0 2px -40px;

        @media(max-width: 767px) {
          margin-left: -20px;
        }
      }
    }

    p:not(.author):last-child:after, div.text:last-child:after, .author:after, h4:after {
      content: "";
      position: relative;
      display: block;
      width: 30px;
      height: 30px;
      background-image: url(../../assets/img/quote.svg);
      background-size: 100%;
      margin: 2px 0 2px -40px;
      transform: rotate(180deg);

      @media(max-width: 767px) {
        margin-left: -20px;
      }
    }

    .author, h4 {
      position: relative;
      font-weight: 400;
      text-align: right;
      margin-right: -40px;
      margin-top: 36px;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 18px;

      &:before {
        content: "— ";
        position: relative;
        top: -1px;
        margin-right: 2px;
      }

      &:after {
        position: absolute;
        top: -36px;
        left: 0;
      }

      @media(max-width: 767px) {
        margin-right: 0;
        padding-left: 30px;
        font-size: 16px;
        font-weight: 500;
        margin-top: 32px;

        &:after {
          top: -30px;
        }
      }
    }
  }
}