// BLOCK ELEMENT MODIFIER NAMING SCHEME
// Any component with subsequent parts should be treated as a block, its parts as elements. Modifiers should be reserved for changes in state
@charset “utf-8”;
// Components
.wrapper{
background-color: #F9F9F9;
} .inner-wrap.blogs-block{
@include responsive(superish-wide-screens){ max-width: 1800px; margin-right: auto; margin-left: auto; }
} .blogs-block{
@include responsive(small-screens){ margin-top: 92px; } @include responsive(medium-screens){ margin-top: 114px; } @include responsive(wide-screens){ margin-top: 127px; }
}
.bar{
width: 2.1875rem; border: 0; border-bottom: 0.325rem solid $ofc_slate; margin-top: 1rem;
}
// MASTHEAD
.header-flat–logo{
fill: $ofc_slate;
}
.blog-masthead–logo{
background-color: $ofc_slate; background-image: url(/uploads/digital-banner.png); background-position: center; background-size: cover; height: 30rem; padding: 6rem; color: $emphasis; .blog-masthead--title{ font-family: 'proxima-nova', Helvetica, Arial, sans-serif; margin-bottom: 0px; font-weight: bold; font-size: 3rem; @include responsive(ultra-wide-screens){ font-size: 5rem; } } hr.bar{ border-bottom: solid 0.4rem $emphasis; width: 3rem; margin-bottom: 2rem; } .blog-masthead--tagline{ font-family: 'proxima-nova', Helvetica, Arial, sans-serif; width: 80%; @include responsive(ultra-wide-screens){ width: 70%; } }
}
.blog-masthead{
@include clearfix; .blog-masthead--subscribe, .blog-masthead--search{ padding: 15px; h3{ margin-bottom: 0px; } }
}
//SEARCH
.blog-masthead–search{
width: 100%; background-color: $text-white; color: $ofc_lightblue; @include responsive(wide-screens){ width: 50%; float: left; } .search-icon{ fill: $ofc_lightblue; height: 1.2rem; margin-right: .7rem; } h3{ color: $ofc_lightblue; } input{ font-weight: 700; margin-left: 1.5rem; border: none; outline: none; font-size: 1.2rem; color: $ofc_lightblue; &::placeholder{ color: $ofc_lightblue; } }
} // SEARCH ALGOLIA .aa-input-container, input.aa-input-search{
width:92%; @include responsive(tinyish-screens){ width: 93%; } @include responsive(small-screens){ width: 95%; } @include responsive(wide-screens){ width: 92%; }
} .aa-input-container {
display: block; position: relative;
} span.algolia-autocomplete{
display: block !important;
} .aa-input-search {
// width: 300px; border: 1px solid rgba(228, 228, 228, 0.6); padding-bottom: 5px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration { display: none; } .aa-input-search{ outline: none; }
.aa-input-icon {
height: 16px; width: 16px; position: absolute; top: 12px; left: 1px; -webkit-transform: translateY(-50%); transform: translateY(-50%); fill: #e4e4e4; }
.aa-dropdown-menu {
width: 92%; @include responsive(tinyish-screens){ width: 93%; } @include responsive(small-screens){ width: 95%; } @include responsive(wide-screens){ width: 110%; } color: $ofc_slate; font-size: .9rem; background: rgba(#FFFFFF,.98); border-radius: 0 0 10px 10px; border: 1px solid rgba(228, 228, 228, 0.6); box-shadow: -5px 5px 5px rgba($nav-black, 0.1); margin-top: 15px;
} .aa-suggestion {
padding: 12px; cursor: pointer;
} .aa-suggestion + .aa-suggestion {
border-top: 1px solid rgba(228, 228, 228, 0.6);
}
.aa-suggestion:hover, .aa-suggestion.aa-cursor { background-color: rgba(241, 241, 241, 0.35); }
.algolia__result-highlight{
font-weight: bold;
} .ais-Highlight{
font-weight: bold;
} .aa-suggestion.aa-cursor{
background-color: rgba($blue, 0.1);
} .aa-suggestion+.aa-cursor{
background-color: rgba($blue, 0.1); border-top: 1px solid $blue;
}
//SUBSCRIBE
.blog-masthead–subscribe{
background-color: $ofc_slate; width: 100%; @include responsive(wide-screens){ width: 50%; float: right; } h3{ color: #FFFFFF; } input{ border: none; font-size: .7rem; background-color: $ofc_slate; border-bottom: 2px solid $ofc_lightblue; color: white; padding-bottom: 4px; margin-left: 3%; outline: none; &::placeholder{ color: $ofc_lightblue; } @include responsive(wide-screens){ width: 50%; } @include responsive(ultra-wide-screens){ width: 70%; } }
}
// BLOG POSTS
// BEM COMPONENETS
// Blocks: featured, featured-zero, featured-add, featured-header, recent-header
// Nested-Blocks: metadata, post-abstract
// Elements: author-name, tags, readtime, date, post-title, summary, button, image, blog, wrappers, header-title
.button{
background-color: $ofc_slate; padding: .5rem .3rem; border-radius: 5px; color: $text-white; display: block; margin: 1rem 0; width: 40%; text-align: center; font-size: .8rem; font-weight: 600; &:hover{ color: darken($text-white, 5%); }
} .recent{
overflow: hidden; @include clearfix; position: relative; background-image: url(/assets/images/full-rec.svg); background-repeat: no-repeat; background-position-x: 2rem; background-position-y: 2rem; background-size: 600px; @include responsive(wide-screens){ background-size: 900px; } @include responsive(extra-ultra-wide-screens){ background-size: 1100px; } @include responsive(super-wide-screens){ background-size: 1300px; } &--title{ margin-left: 5rem; margin-top: 4rem; @include responsive(wide-screens){ margin-top: 5rem; } } h2{ color: $ofc_slate; font-size: 2.1rem; display: block; width: 40%; @include responsive(wide-screens){ width: 45%; } @include responsive(ultra-wide-screens){ width: 425.5px; } }
} .featured{
@include clearfix; background-color: $ofc_lightblue; height: 12rem; overflow: hidden; position: relative; background-image: url(/assets/images/top-rec.svg); background-repeat: no-repeat; background-position-x: 2rem; background-position-y: 2rem; background-size: 600px; @include responsive(wide-screens){ background-size: 900px; } @include responsive(extra-ultra-wide-screens){ background-size: 1100px; } @include responsive(super-wide-screens){ background-size: 1300px; } &--title{ margin-left: 5rem; margin-top: 4rem; width: 75%; @include responsive(wide-screens){ margin-top: 5rem; } } h2{ color: $ofc_slate; font-size: 2.1rem; display: block; width: 40%; @include responsive(wide-screens){ width: 45%; } @include responsive(ultra-wide-screens){ width: 425.5px; } }
} .recent{
background-color: $ofc_lightgray;
}
// Featured post 1
.featured-zero{
width: 100%; @include clearfix; &--blog{ width: 100%; font-size: 1rem; background-color: $ofc_slate; color: white; font-weight: bold; text-transform: uppercase; padding: 1.5rem; @include responsive(wide-screens){ float: left; width: 50%; } } &--image{ width: 100%; height: 20rem; background-size: cover; @include responsive(wide-screens){ display: block; width: 50%; float: right; height: 35rem; } } &--post{ width: 100%; padding: 1rem; @include clearfix; @include responsive(wide-screens){ width: 50%; float: left; } } &--author{ @include clearfix; font-size: .7rem; float: left; padding-left: 1.5rem; a{ color: $ofc_super_lightblue; } } &--author-pic{ img{ float: left; clip-path: circle(49%); width: 2rem; } a{ font-weight: bold; position: relative; top: .1rem; } span{ margin-left: .5rem; } } &--author-data{ padding-left: 2.5rem; p{ margin: 0; line-height: 1rem; } .seperator{ font-size: 0.9rem; position: relative; } } &--post-wrap{ padding-left: 4rem; padding-right: 1rem; max-width: 717px; h4{ margin-top: 4rem; padding-top: 2rem; font-size: 1.5rem; font-family: $condensed-titles; } p{ margin-top: 1rem; } }
}
// Featured items 2 and 3
.featured-other{
background-color: $ofc_lightblue; background-image: url(/assets/images/bottom-rec.svg); background-repeat: no-repeat; background-position-x: 2rem; background-size: 600px; @include responsive(wide-screens){ background-size: 900px; } @include responsive(extra-ultra-wide-screens){ background-size: 1100px; } @include responsive(super-wide-screens){ background-size: 1300px; } width: 100%; position: relative; @include clearfix; padding-bottom: 2rem; // .svg-image{ // width: 75%; // position: absolute; // left: 2rem; // stroke-width: 20; // @include responsive(wide-screens){ // width: 70%; // } // @include responsive(ultra-wide-screens){ // width: 900px; // } // } .post-data{ width: 100%; } &--blog{ font-size: 1rem; background-color: $ofc_slate; color: white; text-transform: uppercase; float: none; width: 100%; padding: .7rem; font-weight: 300; } &--image{ height: 314px; width: 100%; } &--author{ @include clearfix; font-size: .7rem; float: none; padding-left: 1.5rem; padding-top: 1.5rem; a{ color: $ofc_super_lightblue; } } &--author-pic{ img{ float: left; clip-path: circle(49%); width: 2rem; } a{ font-weight: bold; position: relative; } span{ margin-left: .5rem; } } &--author-data{ padding-left: 2.5rem; p{ margin: 0; line-height: 1rem; } .seperator{ font-size: 0.9rem; position: relative; } } &--post-wrap{ overflow: none; padding-left: 1.5rem; padding-right: .5rem; max-width: 617px; @include responsive(extra-ultra-wide-screens){ margin: auto; } .post-summary{ display: block; min-height: 81px; } .post-title{ display: block; padding-top: 0; margin-top: 1rem; min-height: 100px; } .button{ width: 75%; @include responsive(ultra-wide-screens){ width: 40%; } } } &--title{ display: block; padding-top: 0; margin-top: 1rem; min-height: 100px; } &--summary{ display: block; min-height: 108px; margin-top: 1rem; } &--wrap{ width: 40%; float: left; margin-top: 2rem; background-color: white; min-height: 776px; @include clearfix; &.odd{ margin-left: 5%; } &.even{ float: right; margin-right: 5%; } }
}
// RECENT ARTICLES .main-carousel{
margin-bottom: 3rem; width: 300px; margin-left: 6rem; margin-top: 3rem; box-shadow: 0px 2px 60px 0px rgba(160,179,198,0.47); @include responsive(small-screens){ width: 400px; } @include responsive(medium-screens){ width: 500px; } @include responsive(wide-screens){ width: 680px; } @include responsive(ultra-wide-screens){ width: 800px; } @include responsive(extra-ultra-wide-screens){ width: 1200px; margin-left: auto; margin-right: auto; } @include responsive(superish-wide-screens){ width: 1258px; } .carousel-cell{ width: 142; height: 50rem; background-color: white; margin-right: 1rem; font-size: .8rem; box-shadow: 0px 2px 60px 0px rgba(160,179,198,0.47); @include responsive(small-screens){ width: 192px; height: 40rem; } @include responsive(medium-screens){ width: 242px; } @include responsive(wide-screens){ width: 216px; } @include responsive(ultra-wide-screens){ width: 256px; } @include responsive(extra-ultra-wide-screens){ width: 389.3px; } @include responsive(superish-wide-screens){ margin-right: 2.5rem; } @include responsive(super-wide-screens){ } .recent-blog{ padding: .5rem; padding-left: 1rem; background-color: $ofc_slate; color: white; font-weight: 300; span{ text-transform: uppercase; } } .recent-image{ height: 9rem; overflow: hidden; img{ width: 100%; } } .featured-other--author{ font-size: .6rem; } .featured-other--author-pic{ span{ display: block; margin-left: 2.5rem; padding-right: .1rem; } } .featured-other--title{ padding-left: 1.5rem; padding-right: .5rem; font-size: 1rem; } .featured-other--summary{ font-size: .9rem; padding: 0 .5rem 0 1.5rem; } .button{ margin-left: 1.5rem; background-color: $ofc_blue; font-weight: 600; width: 75%; position: absolute; bottom: 3rem; @include responsive(ultra-wide-screens){ width: 40%; } } .featured-other--summary{ } }
}
// More News
.more{
background-color: #F9F9F9; background-image: url(/assets/images/open-rec.svg); background-repeat: no-repeat; background-position-x: 2rem; background-position-y: 2rem; background-size: 600px; @include responsive(wide-screens){ background-size: 900px; } @include responsive(extra-ultra-wide-screens){ background-size: 1100px; } @include responsive(super-wide-screens){ background-size: 1300px; } padding-top: 3rem; .featured--title{ margin-top: 1rem; } h2{ font-size: 2.1rem; } .more-block-wrap{ padding: 0 2rem; @include clearfix; max-width: 1423px; @include responsive(extra-ultra-wide-screens){ margin-right: auto; margin-left: auto; } } .more-block{ @include clearfix; width: 80%; margin-left: 10%; float: right; margin-bottom: 2rem; min-height: 16rem; @include responsive(medium-screens){ width: 40%; } @include responsive(wide-screens){ width: 30%; margin-left: 3%; } @include responsive(ultra-wide-screen){ width: 20%; margin-left: 5%; } .bar{ width: 1.1875rem; border: 0; border-bottom: 0.225rem solid #768496; margin-bottom: 1rem; } } .more-title{ } .more-details{ .more-blog{ font-weight: 600; display: block; color: $link_blue; } .more-time{ font-size: .8rem; display: block; .clock-icon{ width: 12px; position: relative; top: 1px; } } }
}
// POSTSTYLES progressbarJS {
background-color: #92BADC; height: 5px; position: fixed; top: 91px; left: 0; width: 0%; z-index: 250; @include responsive(small-screens){ top: 91px; } @include responsive(medium-screens){ top: 114px; } @include responsive(wide-screens){ top: 129px; }
}
.lead-wrap{
@include clearfix; background-color: #F2F2F2;
} .post-wrapper{
padding-top: 5px; @include clearfix;
} .post-image{
display: none; @include responsive(wide-screens){ display: block; } width: 50%; height: 20rem; background-size: cover; @include responsive(wide-screens){ display: block; width: 50%; float: right; height: 35rem; } background-size: cover;
} .post-summary{
width: 100%; @include responsive(wide-screens){ width: 50%; float: right; } padding-top: 2rem; padding-left: 3rem; padding-right: 2rem; padding-bottom: 1rem; @include responsive(wide-screens){ padding-top: 4rem; padding-left: 6rem; } .summary-publication{ color: $ofc_slate; text-transform: uppercase; margin-bottom: 1.5rem; } .summary-title{ margin-bottom: 2rem; } .summary-details{ padding-left: 1.5rem; margin-bottom: 2rem; border-left: 1px solid $ofc_blue; p{ margin-bottom: 0px; font-size: .8rem; } }
} .post-body{
width: 80%; @include responsive(ultra-wide-screens){ width: 50%; } margin-right: auto; margin-left: auto; padding-top: 3rem; background-color: #F9F9F9; img{ width: 100%; } img.full-screen{ display: block; position: relative; width: 200%; left: -50%; } img.float-left{ @include responsive(ultra-wide-screens){ width: 40%; float: left; margin: 0 1rem 0 0; position: relative; top: .4rem } } img.float-right{ @include responsive(ultra-wide-screens){ width: 40%; float: right; margin: 0 0 0 1rem; position: relative; top: .4rem } } code{ display: block; text-align: center; padding: .7rem; background-color: #B5BCC5; font-weight: 300; } code.full-screen{ display: block; position: relative; width: 200%; left: -50%; } code.float-left{ @include responsive(ultra-wide-screens){ width: 40%; float: left; margin: 0 1rem .5rem 0; clear: left; } } code.float-right{ @include responsive(ultra-wide-screens){ width: 40%; float: right; margin: 0 0 .5rem 1rem; clear: right; } } blockquote{ display: block; width: 200%; position: relative; left: -50%; padding: 2rem 40%; margin-bottom: 1rem; background-color: $ofc_slate; color: $ofc_lightgray; background-image: url(../images/blockquote.svg), url(../images/blockquote-right.svg); background-size: 3rem, 6rem; background-repeat: no-repeat; background-position: left 10% top 1.2rem, right 5% top 2.3rem; strong{ color: whitesmoke; font-weight: bold; } @include responsive(extra-ultra-wide-screens){ background-position: left 15% top 1.2rem, right 12% top 2.3rem; } } aside{ padding: 2rem 0; margin: 2rem 0; border-top: 1px solid $ofc_lightblue; border-bottom: 1px solid $ofc_lightblue; }
} .post-footer–wrap{
width: 100%; background-color: $ofc_slate; color: #c8c6c2;
} .post-footer{
@include clearfix; padding: 1rem; .footer--author-image{ float: left; width: 5rem; margin-right: .8rem; img{ clip-path: circle(49%); width: 5rem; position: relative; top: 4px; @include responsive(ultra-wide-scrreens){ width: 12rem; } } a{ font-weight: bold; position: relative; top: .1rem; } span{ margin-left: .5rem; } } .footer--author-details{ width: 68%; float: left; @include responsive(ultra-wide-screens){ width: 73%; } h3{ font-size: 1rem; color: #c8c6c2; } p{ font-size: .9rem; } }
} .recent.related{
.main-carousel{ margin-right: auto; margin-left: auto; }
} // FOOTER
.footer-flat–logo{
fill: $nav_links;
}