Skip to content

Instantly share code, notes, and snippets.

@ckschmieder

ckschmieder/csq-style.css

Created April 5, 2017 01:46
Show Gist options
  • Save ckschmieder/a90ee6a78c6176baad91895569503954 to your computer and use it in GitHub Desktop.
Save ckschmieder/a90ee6a78c6176baad91895569503954 to your computer and use it in GitHub Desktop.
Download ZIP
Circle Squared dev theme styles backup 4/4/16
Raw
csq-style.css
#main-content .container {
max-width: 960px;
}
.entry-content {
color: #333;
}
.about-top {
background: -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(255,255,255,1) 80%), url(http://cs.randjsc.com/wp-content/uploads/2017/03/istock-2200px-opt.jpg);
background: -webkit-linear-gradient(top, rgba(255,255,255,.4) 0%,rgba(255,255,255,1) 80%), url(http://cs.randjsc.com/wp-content/uploads/2017/03/istock-2200px-opt.jpg);
background: linear-gradient(to bottom, rgba(255,255,255,.4) 0%,rgba(255,255,255,1) 80%), url(http://cs.randjsc.com/wp-content/uploads/2017/03/istock-2200px-opt.jpg);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
background-blend-mode: screen!important;
background-size: cover!important;
background-position: center top!important;
background-repeat: no-repeat!important;
padding-bottom: 0;
}
.contact-bottom {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), url(http://cs.randjsc.com/wp-content/uploads/2017/03/istock-1928x350-opt.jpg);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), url(http://cs.randjsc.com/wp-content/uploads/2017/03/istock-1928x350-opt.jpg);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), url(http://cs.randjsc.com/wp-content/uploads/2017/03/istock-1928x350-opt.jpg);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
background-blend-mode: screen;
background-size: cover;
background-position: center bottom;
}
.footer-flexwrap {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.footer-logo {
float: left;
max-width: 210px;
margin-right: 30px;
}
.et-social-icons {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
margin-left: auto;
}
@media only screen and (max-width: 980px) {
.et_pb_row {
padding: 10px 0;
}
.footer-flexwrap {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.et-social-icons {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
margin-left: initial;
}
}
.et-search-form, .nav li ul, .et_mobile_menu, .footer-widget li:before, .et_pb_pricing li:before, blockquote {
border-color: #E79048;
}
span.dashicons.dashicons-lock {
font-size: 16px;
font-size: 1em;
}
h1.entry-title {
text-align: center;
font-size: 2.25rem;
}
.et_pb_post_title {
text-align: center!important;
}
.et_pb_text {
margin-bottom: 2%!important;
}
.et_pb_divider {
padding: 0 0 2px 0;
}
.et_pb_divider::after {
content: "";
background: url(http://cs.randjsc.com/wp-content/uploads/2017/04/csq-diamond-blue.jpg), white;
position: absolute;
height: 28px;
background-size: 70%;
width: 28px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-position: 40% center;
}
span.scroll-down.et-pb-icon {
transition: all .3s;
}
span.scroll-down.et-pb-icon:hover {
font-size: 36px!important;
}
blockquote {
color: #CE713B;
font-style: italic;
width: 96%;
margin-left: auto;
margin-right: auto;
}
/*------------------------------------------------*/
/*---------[GQ - CUSTOM PORTFOLIO GRID]-----------*/
/*------------------------------------------------*/
/* Change columns from 4-3 */
@media (min-width: 981px){
.gq-portfolio-section .et_pb_gutters2.et_pb_row .et_pb_column_4_4 .et_pb_grid_item {width: 31.33% !important;}
.gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {clear: inherit;}
.gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n) {margin-right: 3%!important;}
.gq-portfolio-section .et_pb_column_4_4 .et_pb_grid_item:nth-child(3n) {margin-right: 0%!important;}}
/* special hover effect for desktop only */
@media (min-width: 981px){
.gq-portfolio-section .et_portfolio_image {
min-height: 200px;}
.gq-portfolio-section .et_pb_portfolio_item {
position: relative;
overflow: hidden;
max-height: 320px;}
.gq-portfolio-section .et_pb_portfolio_item img {
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale(1);
transform: scale(1);}
.gq-portfolio-section .et_pb_portfolio_item:hover img {
-webkit-transform: scale(1.15);
transform: scale(1.15);}
.gq-portfolio-section .et_pb_portfolio_item h2 {
background-color: #cc713c;
z-index: 3;
color: #fff;
font-size: 16px;
position:absolute;
text-align:center;
width:100%;
top:100%;
transition:.5s;
webkit-transition:.5s;
height: 22%;
margin-top: 0;}
.gq-portfolio-section .et_pb_portfolio_item:hover h2 {
top: 78%;
padding: 15px 0;}
.gq-portfolio-section .et_overlay {z-index: 0;}
/*.gq-portfolio-section .et_overlay:before {
opacity:0!important;
top: -10%!important;
font-family: sans-serif!important;
content: 'Read More'!important;
font-size: 13px;
padding: 10px 20px;
background-color: rgba(0, 0, 0, 0.59);
color: #fff;
left: 50%;
margin-right: -50%;
transform: translate(-40%)}
.gq-portfolio-section .et_overlay:hover:before {
opacity:1!important;
top: 6%!important;}
}*/
@media only screen and (min-width : 1061px) and (max-width : 1200px) {
.gq-portfolio-section .et_pb_portfolio_item h2 {font-size: 15px!important;}
.gq-portfolio-section .et_pb_portfolio_item:hover h2 {top: 73%!important;}}
@media only screen and (min-width : 981px) and (max-width : 1060px) {
.gq-portfolio-section .et_pb_portfolio_item h2 {font-size: 14px!important;}
.gq-portfolio-section .et_pb_portfolio_item:hover h2 {top: 72%!important;}}
@media only screen and (max-width : 980px) {
.gq-portfolio-section .et_pb_portfolio_item h2 {font-size: 14px!important;}
.gq-portfolio-section .et_overlay {display:none;}}
/* === END GQ Custom Portfolio Grid ===*/
/* Hero Section
-------------------------------------------------------------------------*/
/* Position hero logo at the top */
.header-content-container.center {
align-self: flex-start!important;
}
.header-content img {
padding: 2em;
}
/* Custom overlay */
.et_pb_fullwidth_header_0.et_pb_fullwidth_header .et_pb_fullwidth_header_overlay {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.85+0,0.5+35,0+45,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.5) 35%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.5) 35%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#hero-section h2 {
font-style: italic;
font-size: 1.85em;
line-height: 1.5;
text-align: center;
}
.et_pb_divider {
margin: .75em 0 1.5em 0!important;
}
h1, h2 {
color: #2C4C64;
font-size: 2rem;
font-family: 'Noto Serif', serif;
}
.et_pb_post_title {
margin-bottom: 0!important;
}
h1.entry-title {
margin-bottom: 0;
}
.entry-content h3 {
font-family: 'Noto Serif', serif;
color: #007494;
font-size: 1.125rem;
line-height: 1.5;
font-style: italic;
}
h3.the-excerpt {
margin-top: 1em;
color: #007495;
line-height: 1.25;
font-style: italic;
}
.entry-content p {
font-family: 'Lato', sans-serif;
}
.et_pb_portfolio_items h2 {
color: white;
background: #2C4C64;
margin: 0!important;
line-height: 1!important;
padding: 0.8em .2em!important;
text-align: center;
font-size: .9rem!important;
top: -2px;
position: relative;
}
#top-menu li.current-menu-item > a {
color: #E79048!important;
}
.et_pb_filterable_portfolio .et_pb_portfolio_items, .et_pb_filterable_portfolio .et_pb_portfolio_items_wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (min-width: 981px) {
.et_pb_gutters3 .et_pb_column_4_4 .et_pb_grid_item, .et_pb_gutters3 .et_pb_column_4_4 .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item {
width: 20.875%;
margin: 0 0 2% 0;
-webkit-flex: 0 0 32%;
-ms-flex: 0 0 32%;
flex: 0 0 32%;
}
}
@media all and (min-width: 981px) {
.et_pb_portfolio_grid {
display: -webkit-flex!important;
display: -ms-flexbox!important;
display: flex!important;
}
}
/*Center filter bar*/
.et_pb_portfolio_filters {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Individual Properties
-------------------------------------------------------------------------*/
.property-details h2 {
color: #007495;
font-style: italic;
}
/* Contact form
-------------------------------------------------------------------------*/
.et_contact_bottom_container {
-webkit-box-shadow: 0px 0px 6px 3px rgba(199,199,199,1);
-moz-box-shadow: 0px 0px 6px 3px rgba(199,199,199,1);
box-shadow: 0px 0px 3px 3px #e8e8e8;
border-radius: 40px;
padding: .275em;
}
.et_pb_contact_submit:hover {
background: inherit;
}
#logo {
background-color: white;
border-radius: 3px;
}
.et-fixed-header #logo {
border-radius: 50%;
}
.et_pb_blurb_content {
max-width: 95%;
}
.et-pb-icon {
font-size: 30px!important;
padding: 12px!important;
}
.et_pb_blurb_position_left .et_pb_blurb_container {
padding-left: 25px;
}
@media only screen and (min-width: 981px) {
.et_pb_gutters2 .et_pb_column_4_4 .et_pb_module, .et_pb_gutters2.et_pb_row .et_pb_column_4_4 .et_pb_module {
margin-bottom: 3.5%;
}
}
@media only screen and (min-width: 580px) {
.et_pb_posts.et_pb_module.et_pb_bg_layout_light.et_pb_blog_0 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.et_pb_posts.et_pb_module.et_pb_blog_0 > article {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
padding: 0 6% 0 0;
}
}
.et_pb_posts.et_pb_module.et_pb_blog_0 .entry-title {
font-family: notoserif!important;
color: #007494;
font-style: italic;
font-size: 1.25rem!important;
}
.header-image {
height: 310px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.single-project .et_main_title {
text-align: center;
}
.entry-details {
margin-top: 2em;
}
.cs-divider {
height: 1px;
background: #2C4C64;
}
.entry-details h3 {
text-align: center;
}
.entry-details > div {
margin-bottom: 1.5em;
}
@media only screen and (min-width: 580px) {
.entry-details > div {
float: left;
width: 50%;
}
.entry-details h3 {
text-align: left;
}
.two-col {
columns: 2;
column-gap: 2.25em;
}
}
.entry-details::after {
display: block;
float: none;
clear: both;
content: "";
}
.leader img {
border: 2px solid #017495;
padding: 2%;
}
.et_pb_team_member_image {
width: auto!important;
}
.et_pb_team_member img {
-webkit-filter: grayscale(0.8) hue-rotate(30deg);
filter: grayscale(0.8) hue-rotate(30deg);
transition: all .3s;
}
.et_pb_team_member.leader img {
-webkit-filter: grayscale(0) hue-rotate(0);
filter: grayscale(0) hue-rotate(0);
}
.et_pb_team_member:hover img {
-webkit-filter: grayscale(0) hue-rotate(0);
filter: grayscale(0) hue-rotate(0);
}
@media all and (min-width: 768px) and (max-width: 980px) {
/* Person Module */
.et_pb_column .et_pb_team_member_image {
width: auto!important;
}
}
@media all and (max-width: 579px) {
/* Person Module */
.et_pb_team_member_image {
display: block;
float: none;
width: auto;
margin: 0 0 12px;
text-align: center;
}
.et_pb_team_member_description {
display: block;
}
}
.et_pb_team_member_description h4, .et_pb_team_member_description .et_pb_member_position {
color: #017495;
font-style: italic;
font-size: 1.15rem;
line-height: 1.4;
}
.et_pb_team_member_description h4 {
font-weight: bold;
}
@media all and (min-width: 580px) {
.et_pb_team_member_image {
display: table-cell;
float: left;
margin-right: 30px;
line-height: 0 !important;
}
}
a.more-link {
text-transform: capitalize;
margin-top: .4em;
}
a.more-link:hover {
text-decoration: underline;
}
#footer-info {
padding: 1em 0;
}
#footer-info span {
display: block;
}
#footer-info a {
font-weight: normal;
text-decoration: underline;
}
#footer-bottom .et-social-icon a {
border: 3px solid #E79048;
border-radius: 50%;
padding: .4em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment