SimplyCodes HC - Stylesheet

sc_helpcenter.css

/********** FONTS IMPORTING **********/

/* Simply Circular */
@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Regular.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Regular.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Italic.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Italic.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Medium.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Medium.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-MediumItalic.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-MediumItalic.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-MediumItalic.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-MediumItalic.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Medium.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Medium.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Bold.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-Bold.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "simply-circular";
  src: url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-BoldItalic.woff2")
      format("woff2"),
    url("https://images.simplycodes.com/fonts/simply-circular/CircularXXWeb-BoldItalic.woff")
      format("woff");
  font-display: fallback;
  font-feature-settings: "'ss08'on";
  font-style: italic;
  font-weight: 700;
}

/********** END FONTS **********/

/********** GLOBAL STYLES **********/
body,
button,
a,
.dsm-root {
  /* Font-family */
  font-family: simply-circular, -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica Neue, sans-serif;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "ss08" on !important;
}

/********** END GLOBAL STYLES **********/

/********** FONTS **********/

h1 {
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: -2.15px;
  line-height: 42px;
  word-break: break-word;
}

h2 {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.65px;
  line-height: 27.3px;
}

.twoCol .popArticles a,
.threeCol .popArticles a,
.most-pop-articles .popArticles a,
.articleList a {
  letter-spacing: -0.2px;
  line-height: 25px;
}

/********** END FONTS **********/

/********** HEADER **********/
.brand {
  width: 150px;
}

.nav a {
  font-weight: 500;
  letter-spacing: -0.4px;
}

/********** END HEADER **********/

/********** COLORS **********/

.navbar .brand,
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: #222;
}

.navbar .nav li a,
.navbar .icon-private-w {
  color: #717171;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active,
#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: #009dc9;
}

#fullArticle .callout-red {
  background: #f0e2ff;
  border-color: #c8bcd4;
}

/********** END COLORS **********/

/********** INPUTS **********/

input[type="text"] {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.18px;
  line-height: 20px;
}

#searchBar button,
#searchBar .search-query {
  height: 40px;
}