/* #Typography */
body {
font-style: $body_font_style;
font-weight: $body_font_weight;
font-size: $body_font_size{px};
line-height: $body_line_height;
font-family: @font_family( $body_font_family );
letter-spacing: $body_letter_spacing{px};
text-align: $body_text_align;
color: $regular_text_color;
}
h1 {
font-style: $h1_font_style;
font-weight: $h1_font_weight;
font-size: @font_size($h1_font_size, multiple, ceil, 0.5)px;
line-height: $h1_line_height;
font-family: @font_family( $h1_font_family );
letter-spacing: $h1_letter_spacing{px};
text-align: $h1_text_align;
color: $regular_h1_color;
}
h2 {
font-style: $h2_font_style;
font-weight: $h2_font_weight;
font-size: @font_size($h2_font_size, multiple, ceil, 0.6)px;
line-height: $h2_line_height;
font-family: @font_family( $h2_font_family );
letter-spacing: $h2_letter_spacing{px};
text-align: $h2_text_align;
color: $regular_h2_color;
}
h3 {
font-style: $h3_font_style;
font-weight: $h3_font_weight;
font-size: @font_size($h3_font_size, multiple, ceil, 0.8)px;
line-height: $h3_line_height;
font-family: @font_family( $h3_font_family );
letter-spacing: $h3_letter_spacing{px};
text-align: $h3_text_align;
color: $regular_h3_color;
}
h4 {
font-style: $h4_font_style;
font-weight: $h4_font_weight;
font-size: @font_size($h4_font_size, multiple, ceil, 0.9333)px;
line-height: $h4_line_height;
font-family: @font_family( $h4_font_family );
letter-spacing: $h4_letter_spacing{px};
text-align: $h4_text_align;
color: $regular_h4_color;
}
h5 {
font-style: $h5_font_style;
font-weight: $h5_font_weight;
font-size: $h5_font_size{px};
line-height: $h5_line_height;
font-family: @font_family( $h5_font_family );
letter-spacing: $h5_letter_spacing{px};
text-align: $h5_text_align;
color: $regular_h5_color;
}
h6 {
font-style: $h6_font_style;
font-weight: $h6_font_weight;
font-size: $h6_font_size{px};
line-height: $h6_line_height;
font-family: @font_family( $h6_font_family );
letter-spacing: $h6_letter_spacing{px};
text-align: $h6_text_align;
color: $regular_h6_color;
}
@media (min-width: 992px) {
h1 { font-size: $h1_font_size{px}; }
h2 { font-size: $h2_font_size{px}; }
h3 { font-size: $h3_font_size{px}; }
h4 { font-size: $h4_font_size{px}; }
}
a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.not-found .page-title { color: $regular_link_color; }
a:hover { color: $regular_link_hover_color; }
/* #Invert Color Scheme */
.invert { color: $invert_text_color; }
.invert h1 { color: $invert_h1_color; }
.invert h2 { color: $invert_h2_color; }
.invert h3 { color: $invert_h3_color; }
.invert h4 { color: $invert_h4_color; }
.invert h5 { color: $invert_h5_color; }
.invert h6 { color: $invert_h6_color; }
.invert a { color: $invert_link_color; }
.invert a:hover { color: $invert_link_hover_color; }
.invert.invert_primary a:hover {
color: $regular_link_hover_color;
}
.text-accent-1 {
color: $regular_accent_color_1;
}
.invert .text-accent-1 {
color: $invert_accent_color_1;
}
.text-accent-2 {
color: $regular_accent_color_2;
}
.invert .text-accent-2 {
color: $invert_accent_color_2;
}
.text-accent-3 {
color: $regular_accent_color_3;
}
.invert .text-accent-3 {
color: $invert_accent_color_3;
}
/* #Layout */
@media (min-width: 1200px) {
.container {
max-width: $container_width{px};
}
}/* #Elements */
blockquote {
color: $regular_accent_color_2;
}
blockquote:before {
color: $regular_accent_color_1;
}
blockquote cite {
font-size: $body_font_size{px};
line-height: $body_line_height;
color: $regular_text_color;
}
code {
color: $invert_text_color;
background: $regular_accent_color_2;
border-color: $regular_accent_color_2;
font-family: @font_family( $body_font_family );
}
.single-post .post > .entry-content > p:first-of-type:first-letter,
.dropcaps {
background: $regular_accent_color_1;
color: $invert_text_color;
}
.contact-block__icon {
color: $regular_accent_color_1;
}
/*List*/
.entry-content ol >li:before{
color: $regular_accent_color_2;
}/* #Header */
.header-container {
background-color: $header_bg_color;
background-image: url($header_bg_image);
background-repeat: $header_bg_repeat;
background-position: $header_bg_position_x top;
background-attachment: $header_bg_attachment;
}
.isStuck {
background-color: $header_bg_color;
}
/* ##Logo */
.site-logo {
font-style: $header_logo_font_style;
font-weight: $header_logo_font_weight;
font-size: $header_logo_font_size{px};
font-family: @font_family( $header_logo_font_family );
}
.site-logo__link:hover {
color: $regular_accent_color_2;
}
/* ##Top Panel */
.top-panel {
background-color: $top_panel_bg;
}/* #Search Form */
.search-form__field {
color: $regular_text_color;
}
.search-form__label i {
color: @lighten($regular_text_color, 25%);
}
.search-form__toggle:hover,
.invert .search-form__toggle:hover{
color: $regular_link_color;
}
.top-panel .search-form__submit,
.mobile-panel .search-form__submit{
color: $regular_link_hover_color;
}
.top-panel .search-form__submit:hover,
.mobile-panel .search-form__submit:hover,
.top-panel.invert .search-form__submit:hover,
.mobile-panel.invert .search-form__submit:hover{
color: $regular_link_color;
}
.top-panel.invert .search-form__field { color: $invert_text_color; }
.top-panel.invert .search-form__field::-webkit-input-placeholder { color: $invert_text_color; }
.top-panel.invert .search-form__field::-moz-placeholder { color: $invert_text_color; }
.top-panel.invert .search-form__field:-moz-placeholder { color: $invert_text_color; }
.top-panel.invert .search-form__field:-ms-input-placeholder { color: $invert_text_color; }
/* #Comment, Contact, Password Forms */
[class^="comment-form-"] i{
color: @lighten($regular_text_color, 25%);
}
.comment-form .submit,
.wpcf7-submit,
.post-password-form label + input {
color: $invert_link_color;
background-color: $regular_accent_color_1;
border-color: $regular_accent_color_1;
}
.comment-form .submit:hover,
.wpcf7-submit:hover,
.post-password-form label + input:hover {
color: $invert_link_color;
background-color: $regular_accent_color_2;
border-color: $regular_accent_color_2;
}
.comment-form .submit:active,
.wpcf7-submit:active,
.post-password-form label + input:active {
box-shadow: 0 0 10px $regular_accent_color_2;
}
/* #Input Placeholders */
::-webkit-input-placeholder { color: $regular_text_color; }
::-moz-placeholder { color: $regular_text_color; }
:-moz-placeholder { color: $regular_text_color; }
:-ms-input-placeholder { color: $regular_text_color; }/* #Social */
.social-list {}
/* #Social (invert scheme) */
.invert .social-list {}
/* #Main Menu */
.main-navigation .menu > li > a {
color: $regular_accent_color_2;
}
.invert .main-navigation .menu > li > a {
color: $invert_accent_color_2;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.menu-hover > a,
.main-navigation .menu > li.current_page_item > a,
.main-navigation .menu > li.current_page_ancestor > a,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current-menu-ancestor > a {
color: $regular_accent_color_1;
}
.main-navigation .sub-menu,
.main-navigation.mobile-menu {
background: @lighten($regular_accent_color_3, 1.2%);
}
.main-navigation ul ul a {
color: $regular_accent_color_2;
}
.main-navigation .sub-menu > li > a:hover,
.main-navigation .sub-menu > li.menu-hover > a,
.main-navigation .sub-menu > li.current_page_item > a,
.main-navigation .sub-menu > li.current_page_ancestor > a,
.main-navigation .sub-menu > li.current-menu-item > a,
.main-navigation .sub-menu > li.current-menu-ancestor > a {
color: $regular_accent_color_1;
}
.menu-item__desc {
color: $regular_text_color;
}
.invert .menu-item__desc {
color: $invert_text_color;
}
.menu-toggle[aria-controls="main-menu"],
.main-navigation .menu li a.sub-menu-toggle {
color: $regular_accent_color_2;
}
/* #Footer Menu */
.footer-menu__items li a {
color: $regular_link_hover_color;
}
.invert .footer-menu__items li a {
color: $invert_link_color;
}
.footer-menu__items li a:hover,
.footer-menu__items li.current-menu-item a,
.footer-menu__items li.current_page_item a,
.invert .footer-menu__items li a:hover,
.invert .footer-menu__items li.current-menu-item a,
.invert .footer-menu__items li.current_page_item a {
color: $regular_link_color;
}
/* #Top Menu */
.top-panel__menu .menu-item.current-menu-item a,
.top-panel__menu .menu-item.current_page_item a {
color: $regular_link_hover_color;
}
.invert .top-panel__menu .menu-item.current-menu-item a,
.invert .top-panel__menu .menu-item.current_page_item a {
color: $regular_link_color;
}
/* #Entry Meta */
.sticky__label {
color: $invert_link_color;
background-color: $regular_accent_color_1;
}
.entry-meta{
font-style: $meta_font_style;
font-weight: $meta_font_weight;
font-size: $meta_font_size{px};
line-height: $meta_line_height;
font-family: @font_family( $meta_font_family );
letter-spacing: $meta_letter_spacing{px};
color: $regular_link_color;
}
.invert .entry-meta a {
color: $invert_link_hover_color;
}
.invert .entry-meta a:hover {
color: $invert_link_color;
}
.posted-by,
.posted-by a {
color: $regular_text_color;
}
.invert .posted-by,
.invert .posted-by a {
color: $invert_text_color;
}
.posted-by a:hover,
.invert .posted-by a:hover {
color: $regular_link_color;
}
.entry-meta i {
color: @lighten($regular_text_color, 25%);
}
.invert .entry-meta i {
color: $invert_text_color;
}
/* #Post Format */
.format-audio .post-featured-content,
.mejs-container-wrapper,
.format-quote .post-featured-content,
.single .format-quote .entry-content blockquote {
background-color: $regular_accent_color_3;
}
.format-link .post-featured-content {
background-color: $regular_accent_color_1;
}
/* #Author Bio */
.post-author__title a{
color: $regular_link_hover_color;
}
.post-author__title a:hover {
color: $regular_link_color;
}
.post-author-bio .post-author__content {
font-size: @font_size($body_font_size, multiple, ceil, 0.77)px;
}
/* #Comments */
.comment-content-wrap {
background-color: $regular_accent_color_3;
}
.comment-content-wrap:before {
border-color: transparent $regular_accent_color_3 transparent transparent;
}
.comment .comment-date {
font-size: @font_size($body_font_size, multiple, ceil, 0.66)px;
color: $regular_link_hover_color;
}
.comment .comment-date:hover {
color: $regular_link_color;
}
.comment .comment-content p {
font-size: @font_size($body_font_size, multiple, ceil, 0.77)px;
}
.comment-reply-link,
#cancel-comment-reply-link {
font-size: @font_size($body_font_size, multiple, ceil, 0.66)px;
}
#cancel-comment-reply-link {
color: $regular_link_color;
}
#cancel-comment-reply-link:hover {
color: $regular_link_hover_color;
}
/* #Swiper navigation*/
.swiper-pagination-bullet {
background-color: @alpha( $regular_accent_color_2, 15 );
}
.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover{
background-color: $regular_accent_color_1;
}
.swiper-button-next,
.swiper-button-prev {
color: @lighten($regular_text_color, 25%);
background-color: $invert_accent_color_1;
}
.swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-button-prev:not(.swiper-button-disabled):hover{
color: $regular_link_color;
}
/* Image pop-up */
a[data-popup="magnificPopup"]:before,
.mini-gallery a:before {
background-color: $regular_accent_color_1;
}/* #Paginations */
.page-links a,
.page-numbers {
background-color: $regular_accent_color_3;
border-color: $regular_accent_color_3;
color: $regular_text_color;
}
.page-numbers.next,
.page-numbers.prev {
color: $regular_link_hover_color;
}
.page-numbers.next:hover,
.page-numbers.prev:hover {
color: $regular_link_color;
}
/* #Breadcrumbs */
.breadcrumbs {
background-color: $regular_accent_color_3;
}
.breadcrumbs__item {
font-style: $breadcrumbs_font_style;
font-weight: $breadcrumbs_font_weight;
font-size: $breadcrumbs_font_size{px};
line-height: $breadcrumbs_line_height;
font-family: @font_family( $breadcrumbs_font_family );
letter-spacing: $breadcrumbs_letter_spacing{px};
}
.breadcrumbs__item-target {
color: $regular_link_hover_color;
}/* #Footer */
.site-footer {
background-color: $footer_bg;
}
.footer-area-wrap {
background-color: $footer_widgets_bg;
}/* #ToTop button */
#toTop {
color: $invert_text_color;
background-color: $regular_accent_color_1;
}
#toTop:hover {
background-color: $regular_accent_color_2;
}
/* #Page Preloader */
.page-preloader__cube:before {
background-color: $regular_accent_color_1;
}/* #Button Appearance Styles (regular scheme) */
.link {
color: $regular_link_hover_color;
}
.invert .link {
color: $invert_link_color;
}
.link:hover,
.invert .link:hover {
color: $regular_link_color;
}
.btn-primary,
.btn-secondary,
.btn-primary:hover,
.btn-secondary:hover,
.invert .btn-primary,
.invert .btn-secondary,
.invert .btn-primary:hover,
.invert .btn-secondary:hover{
color: $invert_link_color;
}
.btn-primary {
background-color: $regular_accent_color_1;
border-color: $regular_accent_color_1;
}
.btn-primary:hover {
background-color: $regular_accent_color_2;
border-color: $regular_accent_color_2;
}
.btn-primary:active {
box-shadow: 0 0 10px $regular_accent_color_2;
}
.btn-secondary {
background-color: $regular_accent_color_2;
border-color: $regular_accent_color_2;
}
.btn-secondary:hover {
background-color: $regular_accent_color_1;
border-color: $regular_accent_color_1;
}
.btn-secondary:active {
box-shadow: 0 0 10px $regular_accent_color_1;
}
.btn-default {
color: $regular_accent_color_2;
}
.btn-default:hover {
color: $invert_link_color;
background-color: $regular_accent_color_1;
border-color: $regular_accent_color_1;
}
.btn-default:active {
box-shadow: 0 0 10px $regular_accent_color_1;
}
/* #Button Appearance Styles (invert scheme) */
.invert .btn-primary,
.invert .btn-secondary,
.invert .btn-default {
color: $invert_link_color;
border-color: $invert_link_color;
background-color: transparent;
}
.invert .btn-primary:hover,
.invert .btn-secondary:hover,
.invert .btn-default:hover {
color: $regular_link_hover_color;
border-color: $invert_link_color;
background-color: $invert_link_color;
}/* #Widget Calendar */
.widget_calendar caption {
color: $regular_accent_color_2;
}
.invert .widget_calendar caption {
color: $invert_text_color;
}
.widget_calendar tbody td:not(.pad) {
background-color: $regular_accent_color_3;
color: $regular_text_color;
}
.invert .widget_calendar tbody td:not(.pad) {
background-color: @darken($regular_accent_color_3, 10%);
color: $regular_text_color;
}
.widget_calendar tbody td a{
border: 1px solid $regular_accent_color_3;
background-color: $invert_accent_color_1;
color: $regular_text_color;
}
.widget_calendar tbody td a:hover{
background-color: $regular_accent_color_1;
color: $invert_text_color;
border-color: $regular_accent_color_1;
}
.widget_calendar tbody td#today {
background-color: $regular_accent_color_1;
color: $invert_text_color;
}
/* #Widget Tag Cloud */
.tagcloud a {
color: $regular_text_color;
background-color: $regular_accent_color_3;
border-color: $regular_accent_color_3;
}
/* #Widget Recent Posts - Comments, Archive */
.widget_recent_entries a,
.widget_recent_comments a,
.widget_archive a{
color: $regular_link_hover_color;
}
.invert .widget_recent_entries a,
.invert .widget_recent_comments a,
.invert .widget_archive a {
color: $invert_link_color;
}
.widget_recent_entries a:hover,
.widget_recent_comments a:hover,
.widget_archive a:hover {
color: $regular_link_color;
}
.widget_recent_entries .post-date {
color: $regular_accent_color_1;
}
.invert .widget_recent_entries .post-date {
color: $invert_accent_color_1;
}
/* #Widget categories */
.widget_categories ul li:after {
color: $regular_accent_color_1;
}
.invert .widget_categories ul li:after {
color: $invert_accent_color_1;
}