ihk24/templates/source/sass/partials/components/_fonts.scss

@charset "UTF-8";

@include font-definition('Icons', 'icons/icons');
@include font-definition('IHK24FontAwesome', 'ihk24-fontawesome/ihk24-fontawesome');
@include font-definition('Korb', 'korb_regular_macroman/korb-webfont');
@include font-definition('Korb', 'korb_bold_macroman/korb_bold-webfont', 700);
@include font-definition('Source Sans Pro', 'sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont');
@include font-definition('Source Sans Pro', 'sourcesanspro_light_macroman/SourceSansPro-Light-webfont', 300);
@include font-definition('Source Sans Pro', 'sourcesanspro_italic_macroman/SourceSansPro-It-webfont', 400, italic);
@include font-definition('Source Sans Pro', 'sourcesanspro_semibold_macroman/SourceSansPro-Semibold-webfont', 600);
@include font-definition('Source Sans Pro', 'sourcesanspro_bold_macroman/SourceSansPro-Bold-webfont', 700);

@mixin h1 {
  font-family: "Korb", sans-serif;
  font-size: 64px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0.6em -0.02em 0.5em;

  @media(max-width: 1339px) {
    font-size: 54px;
  }
  @media(max-width: 999px) {
    font-size: 46px;
  }
  @media(max-width: 767px) {
    font-size: 36px;
  }
}

@mixin h2 {
  font-family: "Korb", sans-serif;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 400;
  margin: 1.6em -0.02em 0.6em;

  @media(max-width: 1339px) {
    font-size: 36px;
  }
  @media(max-width: 999px) {
    font-size: 32px;
  }
  @media(max-width: 767px) {
    font-size: 28px;
  }
}

@mixin h3 {
  font-family: "Korb", sans-serif;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0.8em -0.02em 0.6em;

  @media(max-width: 1339px) {
    font-size: 32px;
  }
  @media(max-width: 999px) {
    font-size: 28px;
  }
  @media(max-width: 767px) {
    font-size: 24px;
  }
}

@mixin h4 {
  font-family: "Korb", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 28px;
  line-height: 1.2;
  margin: 1.5em 0 0.8em;

  @media(max-width: 1339px) {
    font-size: 24px;
  }
  @media(max-width: 767px) {
    font-size: 20px;
  }
}

@mixin h5 {
  font-family: "Korb", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  margin: 1em 0 0.6em;

  @media(max-width: 1339px) {
    font-size: 20px;
  }
  @media(max-width: 767px) {
    font-size: 18px;
  }
}

@mixin h6 {
  font-size: 22px;
  font-weight: 600;
  margin: 1.2em 0 0.5em;

  @media(max-width: 767px) {
    font-size: 18px;
  }
}

html, body, button {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color: $color-text;
  color: var(--theme-color-text, $color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media(max-width: 1339px) {
    font-size: 20px;
  }
  @media(max-width: 999px) {
    font-size: 18px;
  }
  @media(max-width: 767px) {
    //font-size: 16px;
  }
}

h1, .like-h1 {
  @include h1;
}

h2, .like-h2 {
  @include h2;
}

h3, .like-h3 {
  @include h3;
}

h4, .like-h4 {
  @include h4;
}


h5, .like-h5 {
  @include h5;
}

h6 {
  @include h6;
}

.title {
  font-family: "Korb", sans-serif;
  font-weight: 400;
}

h1, .like-h1,
h2, .like-h2,
h3, .like-h3,
h5,
h6 {
  &:first-child {
    margin-top: 0;
  }
}

p, .text, ul.nobreaks {
  margin: 0 0 0.5em;
}

ul.nobreaks {
  padding: 0;
  list-style: none;

  li {
    margin: 0;
    padding: 0;

    &:after {
      display: none;
    }
  }
}

p a, .text a {
  color: $color-link;
  transition: 0.2s ease;

  &:hover {
    color: $color-link-hover;
  }
}

.clearfix {
  &:after {
    content: "";
    position: relative;
    display: block;
    clear: both;
  }
}

.kicker {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.3px;

  @media(max-width: 767px) {
    font-size: 14px;
  }

  + h1, + h2, + h3, + h4 {
    margin-top: 0;
  }
}

.initial {
  font-weight: 600;
  margin: 12px 0 1em;
  min-height: 3.4em;

  &::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 1;
    margin: -0.04em 0.08em -0.2em -0.02em;
    font-weight: 400;
  }

  @media(max-width: 767px) {
    margin: 24px 0;

    &::first-letter {
      margin-top: -0.05em;
    }
  }

  &.text:after {
    content: "";
    display: table;
    clear: both;
  }

}

[data-browser="firefox"] {
  .initial::first-letter {
    margin-top: 0.113em;
  }
  .initial.text:after {
    content: "";
    display: table;
    clear: both;
  }
}

.icon-box {
  font-family: "Icons";
  font-weight: 400;
  text-transform: none;
  text-decoration: none !important;
}