Skip to content

Instantly share code, notes, and snippets.

@ivapie
Created October 10, 2016 17:21
Show Gist options
  • Save ivapie/599f0339d05650d1747dcc4355fd1ac8 to your computer and use it in GitHub Desktop.
Save ivapie/599f0339d05650d1747dcc4355fd1ac8 to your computer and use it in GitHub Desktop.
@font-face {
font-family: 'AvenirNextRegular';
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.eot");
/* IE9 Compat Modes */
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.eot?#iefix") format("embedded-opentype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.woff2") format("woff2"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.woff") format("woff"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.ttf") format("truetype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Regular.svg#svgFontName") format("svg");
/* Legacy iOS */
}
@font-face {
font-family: 'AvenirNextMedium';
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.eot");
/* IE9 Compat Modes */
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.eot?#iefix") format("embedded-opentype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.woff2") format("woff2"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.woff") format("woff"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.ttf") format("truetype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Medium.svg#svgFontName") format("svg");
/* Legacy iOS */
}
@font-face {
font-family: 'AvenirNextDemi';
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.eot");
/* IE9 Compat Modes */
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.eot?#iefix") format("embedded-opentype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.woff2") format("woff2"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.woff") format("woff"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.ttf") format("truetype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/AvenirNextLTW04-Demi.svg#svgFontName") format("svg");
/* Legacy iOS */
}
@font-face {
font-family: 'GrotesqueMedium';
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.eot");
/* IE9 Compat Modes */
src: url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.eot?#iefix") format("embedded-opentype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.woff2") format("woff2"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.woff") format("woff"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.ttf") format("truetype"), url("https://usquickstart.qbcontent.com/content/themes/qs2/resources/assets/fonts/GeogrotesqueW03-Medium.svg#svgFontName") format("svg");
/* Legacy iOS */
}
a {
color: #393a3d;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
a:hover, a.active {
color: #0076c5;
}
body {
color: #393a3d;
font-size: 15px;
font-family: 'AvenirNextRegular';
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize -- included in bootstrap3 */
a:hover {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1 {
font-size: 36px;
font-family: 'GrotesqueMedium';
}
.h1.b {
font-size: 24px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 19px;
}
.qb-space-top-lg, .qb-post-banner-component .description, .qb-post-banner-component .side-right {
padding: 60px 0 0 0;
margin: 0;
}
.qb-space-top-md, .qb-post-keep-component .title, .qb-post-related-component h1 {
padding: 40px 0 0 0;
margin: 0;
}
.qb-space-top-sm, .qb-post-related-component .row, .qb-post-related-component .row .section .description h2, .qb-post-related-component .row .section .description p {
padding: 20px 0 0 0;
margin: 0;
}
.qb-space-top-xs {
padding: 8px 0 0 0;
margin: 0;
}
.qb-space-lg {
padding: 60px;
margin: 0;
}
.qb-space-md {
padding: 40px;
margin: 0;
}
.qb-space-sm, .qb-call-in-action-floating-component, .qb-post-related-component .row .section .description {
padding: 20px;
margin: 0;
}
.qb-space-xs {
padding: 8px;
margin: 0;
}
.qb-list-horizontal, .qb-post-banner-component .description ul {
display: inline-block;
padding: 0;
}
.qb-list-horizontal li, .qb-post-banner-component .description ul li {
display: inline-block;
}
.qb-button, .qb-call-in-action-floating-component button {
background: #018100;
border: 0px;
border-radius: 4px;
font-size: 15px;
font-family: 'AvenirNextDemi';
padding: 6px 16px;
-webkit-transition: background 0.5s;
transition: background 0.5s;
color: #fff;
}
.qb-button:hover, .qb-call-in-action-floating-component button:hover {
background: #2ca01c;
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.h-ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
.v-ellipsis, .qb-post-related-component .row .section .description h2, .qb-post-related-component .row .section .description p {
display: block;
/* Fallback for non-webkit */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.qb-input-text, .qb-call-in-action-floating-component input[type="text"] {
height: 30px;
font-size: 15px;
border: 1px solid #393a3d;
padding: 0 5px;
border-radius: 4px;
width: 100%;
color: #393a3d;
}
.btn-border {
border: 2px solid #000;
border-radius: 4px;
padding: 7px 14px;
font-size: 19px;
background: #fff;
font-family: 'AvenirNextDemi';
color: #393a3d !important;
}
.btn-border:hover {
color: #fff !important;
text-decoration: none !important;
background: #393a3d;
}
.qb-background-gray {
background: #f4f5f8;
}
.qb-call-in-action-floating-component {
background: #494c53;
color: #fff;
width: 220px;
min-height: 295px;
margin-right: 20px;
margin-top: -148px;
position: fixed;
top: 50%;
right: 0;
z-index: 999;
opacity: 1;
filter: alpha(opacity=1);
/* For IE8 and earlier */
-webkit-transition: opacity 0.5s, margin-right 0.5s;
transition: opacity 0.5s, margin-right 0.5s;
}
.qb-call-in-action-floating-component .graphic {
background-position: top center;
background-size: cover;
height: 61px;
width: 100%;
margin: 20px auto;
}
.qb-call-in-action-floating-component p {
margin: 10px 0 0 0;
font-size: 15px;
}
.qb-call-in-action-floating-component button {
margin-top: 16px;
}
@media only screen and (max-width: 1024px) {
.qb-call-in-action-floating-component {
opacity: 0;
filter: alpha(opacity=0);
margin-right: -9999px;
/* For IE8 and earlier */
}
}
.qb-post-banner-component {
background: #fff;
border-bottom: 1px solid #d4d7dc;
}
.qb-post-banner-component .description {
position: relative;
padding-bottom: 82px;
min-height: 340px;
padding-left: 0;
padding-right: 0;
}
.qb-post-banner-component .description h1 {
font-size: 44px;
}
.qb-post-banner-component .description p {
margin: 15px 0 0 0;
font-size: 19px;
}
.qb-post-banner-component .description p a {
color: #0076c5;
}
.qb-post-banner-component .description p a:hover {
text-decoration: underline;
}
.qb-post-banner-component .description span {
margin: 2px 0 0 0;
font-size: 15px;
display: block;
}
.qb-post-banner-component .description ul {
position: absolute;
width: 100%;
height: auto;
bottom: 40px;
margin: 0;
}
.qb-post-banner-component .description ul li {
margin-right: 2px;
}
.qb-post-banner-component .description ul li i {
font-size: 20px;
}
.qb-post-banner-component .side-right .graphic {
background-position: top center;
background-size: cover;
height: 248px;
width: 100%;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.qb-post-banner-component .description {
min-height: auto;
padding-left: 0 !important;
padding-right: 0 !important;
}
.qb-post-banner-component .side-right {
padding: 0;
}
}
.qb-post-popular-component .title {
background: #393a3d;
color: #fff;
padding: 10px 8px;
}
.qb-post-popular-component ul {
padding: 0;
margin: 0;
list-style: none;
}
.qb-post-popular-component ul li {
border-top: 1px solid #d4d7dc;
}
.qb-post-popular-component ul li a {
display: block;
padding: 13px 8px;
}
.qb-post-popular-component ul li a:hover {
text-decoration: underline;
}
.qb-post-popular-component ul li:first-child {
border-top: 0;
}
.qb-post-keep-component {
clear: both;
}
.qb-post-keep-component .title {
font-size: 19px;
font-family: 'AvenirNextDemi';
}
.qb-post-keep-component ul {
padding: 14px 0 0 0;
}
.qb-post-keep-component ul li {
float: left;
margin: 0 12px 9px 0;
list-style: none;
}
.qb-post-keep-component ul li a {
display: block;
padding: 6px 16px;
background: #d4d7dc;
-webkit-transition: background 0.5s;
transition: background 0.5s;
}
.qb-post-keep-component ul li a:hover, .qb-post-keep-component ul li a.active {
background: #8d9096;
color: #fff;
}
.qb-post-related-component {
padding-bottom: 60px;
}
.qb-post-related-component .row .section {
padding-left: 10px;
padding-right: 10px;
}
.qb-post-related-component .row .section .graphic {
background-size: cover;
background-position: center;
width: 100%;
height: 137px;
}
.qb-post-related-component .row .section .description {
border-bottom: 1px solid #d4d7dc;
height: 235px;
background: #fff;
}
.qb-post-related-component .row .section .description h2 {
font-size: 19px;
-webkit-line-clamp: 2;
}
.qb-post-related-component .row .section .description p {
-webkit-line-clamp: 3;
font-size: 15px;
}
.qb-post-related-component .row .section .description a {
color: #0076c5;
font-size: 15px;
}
.qb-post-related-component .row .section .description span {
text-transform: uppercase;
color: #babec5;
display: block;
font-size: 15px;
}
@media only screen and (max-width: 767px) {
.qb-post-related-component .row .section {
margin-bottom: 20px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.qb-post-related-component .row .section .description {
height: auto;
}
}
@media only screen and (min-width: 768px) {
.qb-post-related-component .section:first-child {
padding-left: 0 !important;
}
.qb-post-related-component .section:last-child {
padding-right: 0 !important;
}
}
.qb-post-component {
font-size: 19px;
}
.qb-post-component h2 {
font-family: 'GrotesqueMedium';
font-size: 34px;
margin-bottom: 11px;
}
.qb-post-component h3 {
font-family: 'AvenirNextDemi';
}
.qb-post-component p {
margin: 0 0 23px 0;
line-height: 1.3;
}
.qb-post-component img {
margin: 0 auto 23px auto;
display: block;
}
.qb-post-component quote {
font-size: 30px;
color: #2ca01c;
text-align: center;
font-family: 'GrotesqueMedium';
display: block;
margin-bottom: 23px;
width: 90%;
line-height: 1.2;
}
.qb-post-component a {
color: #0076c5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment