| Current File : /home/mdkeenpw/www/wp-content/plugins/trx_addons/addons/qw-extension/css/qw_extension_services.scss |
@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";
$theme_icons: "fontello";
$qw_addon_icons: "qw_extension_icons";
/* Panel */
.sc_services_qw-panel {
--sc-services-panel-text: #fff;
.sc_services_columns_wrap,
.sc_item_posts_container {
margin-left: 0;
margin-right: 0;
position: relative;
overflow: hidden;
[class*="trx_addons_column-"] {
padding: 0 !important;
position: relative;
&:before {
content: "";
display: block;
@include abs-pos(-1px, 0, 0, -1px, 1);
border-top: 1px solid;
border-left: 1px solid;
border-color: rgba(255, 255, 255, 0.2);
}
}
}
.sc_services_content .sc_services_item + .sc_services_item {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sc_services_item {
position: relative;
z-index: 2;
color: var(--sc-services-panel-text);
&:before {
content: '';
width: 0;
height: 0;
padding-top: 145%;
display: inline-block;
}
&:after {
content:'';
display: block;
@include abs-pos(-1px,0,0,-1px);
z-index: -1;
background-color: var(--theme-color-text_link);
@include transition(opacity .3s ease-out);
opacity: 0;
}
&:hover:after {
opacity: 0.9;
}
// content
.sc_services_item_content {
@include abs-pos;
}
.sc_services_item_content_inner {
position: relative;
z-index: 1;
@include flex;
@include flex-direction(column);
@include flex-justify-content(stretch);
@include flex-align-items(flex-start);
@include border-box;
width: 100%;
height: 100%;
overflow: hidden;
padding: 2.6em 2.4em;
}
.sc_services_item_content_inner_top {
@include transform(translateY(0));
opacity: 1;
will-change: transform, opacity;
@include transition(transform .3s ease-out, opacity .3s ease-out);
}
&:hover .sc_services_item_content_inner_top {
@include transform(translateY(-15px));
opacity: 0;
}
.sc_services_item_content_inner_bottom {
@include flex-grow(1);
@include flex;
@include flex-direction(column);
@include flex-justify-content(flex-end);
position: relative;
z-index: 1;
width: 100%;
max-height: 100%;
overflow: hidden;
@include border-box;
}
// thumb
.sc_services_item_thumb {
display: block;
margin: 0;
@include square(4em);
@include border-round;
img {
object-fit: cover;
object-position: center;
height: 100%;
width: auto;
}
.mask, .icons, .sc_services_item_price {
display: none;
}
}
// icon
.sc_services_item_icon,
.sc_services_item_pictogram {
position: relative;
display: inline-block;
text-align: left;
margin: 0;
@include font(2.5em, 1em);
@include box(auto, auto);
color: var(--sc-services-panel-text);
}
.sc_services_item_icon {
img {
@include abs-cc;
}
&.sc_icon_type_svg svg {
@include box(1em, 1em);
position: relative;
top: 2px;
}
}
// number
.sc_services_item_number {
display: inline-block;
@include font(1.944em, 1em);
color: inherit;
&.duplicate {
@include font(3.8vw, 1em, 200);
margin: 0 0 0.6em;
opacity: 0;
@include transition(opacity .3s ease);
}
}
&:hover .sc_services_item_number.duplicate {
opacity: 1;
}
// title
.sc_services_item_title {
margin: 0;
@include font(1.944em, 1.17em);
color: var(--sc-services-panel-text);
a {
color: var(--sc-services-panel-text);
}
&.with_price .sc_services_item_price {
margin: 0;
}
}
// text
.sc_services_item_text {
@include font(17px, 1.6em);
color: var(--sc-services-panel-text);
opacity: 0.7;
display: none;
margin: 0.9rem 0 0 0;
p:last-child {
margin-bottom: 0;
}
}
// button
.sc_services_item_button {
margin-top: 0.9rem;
line-height: 1;
}
.sc_services_item_more_link {
position: relative;
z-index: 1;
display: inline-block;
@include font(15px, 21px, 500);
color: var(--sc-services-panel-text);
overflow: hidden;
.link_text {
display: inline-block;
position: relative;
margin-right: 10px;
vertical-align: middle;
}
.link_icon {
position: relative;
display: inline-block;
vertical-align: middle;
overflow: hidden;
@include box(1.4em, 1.4em, 1.4em);
text-align: center;
@include border-box;
@include rotate(0);
@include transition(transform .3s ease-out);
will-change: transform;
&:before {
@include font(11px, inherit, 400, inherit);
content: '\e802';
font-family: $qw_addon_icons;
display: inline-block;
vertical-align: top;
color: currentColor;
}
}
}
&:hover .sc_services_item_more_link .link_icon,
.sc_services_item_more_link:hover .link_icon {
@include rotate(-45deg);
}
}
// cover link
.sc_services_item_link {
@include abs-cover(10);
}
// bg thumbs
.sc_services_qw_panel_thumbs {
@include abs-cover(0);
background-color: #000;
.sc_qw_panel_thumb {
@include abs-cover(0);
@include bg-cover;
@include transition-property(opacity, 0.5s);
opacity: 0;
pointer-events: none;
}
.sc_qw_panel_thumb_active {
opacity: 1;
}
}
}
/* Stylish */
.sc_services_qw-stylish {
.trx_addons_columns_wrap {
position: relative;
overflow: hidden;
margin: -1px;
border: 1px solid;
border-color: var(--theme-color-bd_color) !important;
> [class*="trx_addons_column-"] {
padding: 0 !important;
position: relative;
&:before {
content: '';
display: block;
@include abs-pos(-1px, 0, 0, -1px, 1);
border-top: 1px solid;
border-left: 1px solid;
border-color: var(--theme-color-bd_color);
}
}
}
.sc_services_item {
position:relative;
z-index: 1;
@include flex;
text-align: left;
&:before {
content: ' ';
@include box(0, 0);
padding-top: 123%;
display:inline-block;
}
&.with_more {
.sc_services_item_title_wrap {
max-width: 75%;
}
}
&.with_image {
.sc_services_item_content {
&:before {
content: ' ';
@include abs-pos(0,0,0,0,-1);
background: var(--theme-color-bg_color);
@include transition(opacity .3s ease);
opacity: 1;
}
}
&:hover {
.sc_services_item_content {
&:before {
opacity: 0;
@include transition(opacity .3s ease);
}
}
}
.sc_services_item_content {
&:after {
content: ' ';
@include abs-pos(0,0,0,0,-1);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
@include transition(opacity .3s ease);
opacity: 0;
}
}
&:hover {
.sc_services_item_content {
&:after {
opacity: 0.9;
@include transition(opacity .3s ease);
}
}
}
.sc_services_item_content.without_image {
&:after,
&:before {
display:none;
}
.sc_services_item_icon,
.sc_services_item_number,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_more_link {
color: var(--theme-color-text_dark);
}
.sc_services_item_text {
color: var(--theme-color-text);
}
}
}
.sc_services_item_link {
@include abs-cover(10);
}
.sc_services_item_content {
position: relative;
z-index: 1;
@include flex;
@include bg-cover;
background-color: var(--theme-color-bg_color);
width: 100%;
max-height:100%;
overflow:hidden;
}
.sc_services_item_content_inner {
position: relative;
z-index: 1;
@include flex;
@include flex-direction(column);
@include flex-justify-content(stretch);
@include flex-align-items(flex-start);
@include border-box;
width: 100%;
max-height:100%;
overflow:hidden;
padding: 2.4em 2em;
}
.sc_services_item_content_inner_top {
@include transform(translateY(-15px));
opacity: 0;
will-change: transform, opacity;
@include transition(transform .3s ease-out, opacity .3s ease-out);
+ .sc_services_item_content_inner_bottom {
margin-top: 3em;
}
}
&:hover .sc_services_item_content_inner_top {
@include transform(translateY(0));
opacity: 1;
}
.sc_services_item_content_inner_bottom {
@include flex;
@include flex-direction(column);
@include flex-justify-content(flex-end);
@include flex-grow(1);
width: 100%;
}
.sc_services_item_info_wrap {
@include flex;
@include flex-justify-content(space-between);
@include flex-align-items(flex-end);
}
.sc_services_item_icon,
.sc_services_item_pictogram {
position: relative;
display: inline-block;
line-height: 1em;
}
.sc_services_item_pictogram {
img {
height: 2.5em;
}
}
.sc_services_item_icon {
font-size: 2.5em;
&.sc_icon_type_svg {
svg {
@include box(1em, 1em);
}
}
}
.sc_services_item_number {
margin-top: 0;
display: inline-block;
@include font(1.556em, 1em, var(--theme-font-h4_font-weight));
letter-spacing: 0;
}
.sc_services_item_title {
margin: 0;
}
.sc_services_item_subtitle {
margin: 0;
}
.sc_services_item_subtitle + .sc_services_item_title {
margin-top: 0.3em;
}
.sc_services_item_text + .sc_services_item_title {
margin-top: 0.25em;
}
.sc_services_item_price {
@include font(1.556em, '', var(--theme-font-h4_font-weight));
text-shadow: none;
margin-bottom: 0.5em;
}
.sc_services_item_content {
p {
margin:0;
+ p {
margin-top:0.2em;
}
}
}
.sc_services_item_more_link {
padding: 1px;
position: relative;
display: inline-block;
@include font(15px, 21px, 500);
color: var(--theme-color-text_dark);
z-index: 1;
overflow: hidden;
}
.sc_services_item_more_link {
.link_text {
display: none;
position: relative;
margin-right: 0;
vertical-align: middle;
text-indent: -110px;
visibility: hidden;
white-space: nowrap;
opacity: 0;
@include transition(visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease);
will-change: visibility, margin-right, text-indent, opacity;
}
.link_icon {
position: relative;
display: inline-block;
vertical-align: middle;
&:before {
@include font(24px, inherit, 400, inherit);
content: '\E803';
font-family: $qw_addon_icons;
display: inline-block;
vertical-align: middle;
color: currentColor;
@include transition(transform .3s ease);
}
}
}
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_icon,
.sc_services_item_number {
color: var(--theme-color-text_dark);
@include transition(color .3s ease);
}
.sc_services_item_text,
.sc_services_item_subtitle,
.sc_services_item_subtitle a {
color: var(--theme-color-text);
@include transition(color .3s ease);
}
.sc_services_item_content {
@include transition(background-color .3s ease);
}
.sc_services_item_text {
max-width: 95%;
@include font(17px, 25px);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
height: 0;
opacity: 0;
@include transition(margin-top .3s ease-out, color .3s ease, opacity .3s ease-out, height .3s ease);
}
&:hover {
.sc_services_item_content {
background-color: #2B2F3B;
}
.sc_services_item_text {
height: 25px;
opacity: 1;
}
.sc_services_item_info_wrap + .sc_services_item_text {
margin-top: 0.9em;
}
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_icon,
.sc_services_item_number,
.sc_services_item_title a,
.sc_services_item_subtitle a {
color: #FFFFFF;
}
.sc_services_item_text {
color: #FFFFFFCC;
}
.sc_services_item_more_link {
color:#FFFFFF;
.link_text {
opacity: 1;
text-indent: 0;
margin-right: 6px;
visibility: visible;
@include transition(visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease);
}
}
.sc_services_item_more_link {
.link_icon {
&:before {
@include transform(rotate(45deg));
}
}
}
}
}
[class*="column-"],
.slider-slide {
.sc_services_item {
&.with_image {
.sc_services_item_content {
&.without_image {
background-color: var(--theme-color-text_link_007);
}
}
}
}
}
[class*="column-"]:nth-child(3n-1),
.slider-slide:nth-child(3n-1) {
.sc_services_item {
&.with_image {
.sc_services_item_content {
&.without_image {
background-color: var(--theme-color-text_link2_007);
}
}
}
}
}
[class*="column-"]:nth-child(3n),
.slider-slide:nth-child(3n) {
.sc_services_item {
&.with_image {
.sc_services_item_content {
&.without_image {
background-color: var(--theme-color-text_link3_007);
}
}
}
}
}
}
/* Price */
.sc_services_qw-price {
--qw-var-services-item-head-indent: 72px;
.sc_services_item {
position: relative;
z-index: 1;
+ .sc_services_item {
margin-top: var(--theme-var-grid_gap);
}
}
.sc_services_item.with_head {
.sc_services_item_head {
@include box(var(--qw-var-services-item-head-indent), var(--qw-var-services-item-head-indent));
@include abs-lt();
@include flex;
@include flex-align-items(center);
@include flex-justify-content(center);
@include border-box();
@include border-radius(50%);
.post_featured {
@include border-radius(50%);
margin: 0;
overflow: hidden;
position: relative;
z-index: 1;
}
+ .sc_services_item_info {
padding-top: 6px;
padding-left: 15px;
margin-left: var(--qw-var-services-item-head-indent);
min-height: var(--qw-var-services-item-head-indent);
}
}
&:not(.with_image) .sc_services_item_head {
border: 1px solid var(--theme-color-bd_color);
}
}
.sc_services_item_title_wrap {
width: 100%;
@include flex;
@include flex-justify-content(space-between);
@include flex-align-items(start);
}
// for more columns
.sc_item_columns_4, .sc_item_columns_5, .sc_item_columns_6 {
.sc_services_item_title_wrap {
@include flex-wrap(wrap);
@include flex-justify-content(flex-start);
@include flex-align-items(flex-start);
@include flex-direction(column);
.sc_services_item_title {
min-width: inherit !important;
max-width: none !important;
}
.sc_services_item_price {
max-width: none !important;
}
.sc_services_item_price_dots {
margin: 0 0 8px;
line-height: 1;
}
}
}
.sc_services_item_info .sc_services_item_content {
@include font(15px, 1.5em, 400);
margin-top: 5px;
p:last-child {
margin-bottom: 0;
}
}
.sc_services_item_number {
@include font(1.8em, 1);
margin-top: -8%;
}
.sc_services_item_icon,
.sc_services_item_pictogram {
display: inline-block;
font-size: 2em;
@include box(auto, auto, 1em);
}
.sc_services_item_price_dots {
display: block;
margin: 0 20px;
position: relative;
z-index: 1;
line-height: 1.3em;
width: 100%;
min-width: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@include border-box;
&:after {
content: '. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .';
display: block;
font-size: 20px;
letter-spacing: -1.83px;
color: var(--theme-color-text_light);
}
}
.sc_services_item_price,
.sc_services_item_title {
margin: 0;
@include font(1.333em, 1.2em, 400);
}
.sc_services_item_title.with_price {
flex-shrink: 0;
min-width: 15%;
max-width: 60%;
}
.sc_services_item_price {
flex-shrink: 0;
max-width: 110px;
color: var(--theme-color-text_dark);
}
.sc_services_item_title a {
color: var(--theme-color-text_dark);
&:hover {
color: var(--theme-color-text_dark);
}
}
.sc_services_item_icon {
color: var(--theme-color-text_link);
}
.sc_services_item:hover .sc_services_item_icon {
color: var(--theme-color-text_dark);
}
}
/* Card */
.sc_services_qw-card {
.sc_services_item {
padding: 2.4em;
text-align: center;
background-color: var(--theme-color-alter_bg_color);
&.with_image.has-post-thumbnail {
.sc_services_item_title {
.sc_services_item_price {
display: none;
}
}
}
.sc_services_item_header {
+ .sc_services_item_thumb,
+ .sc_services_item_info {
margin-top: 1.5em;
}
+ .sc_services_item_pictogram,
+ .sc_services_item_icon {
margin-top: 20px;
}
+ .sc_services_item_number {
margin-top: 10px;
}
}
.sc_services_item_thumb {
margin-bottom: 0;
+ .sc_services_item_info {
margin-top: 1.6em;
}
img {
@include transform(scale(1.01, 1.01));
@include transition(transform .3s ease);
will-change: transform;
}
}
.sc_services_item_icon,
.sc_services_item_pictogram {
position: relative;
display: inline-block;
line-height: 1em;
+ .sc_services_item_info {
margin-top: 1.6em;
}
}
.sc_services_item_pictogram {
img {
height: 3em;
}
}
.sc_services_item_icon {
font-size: 3em;
}
.sc_services_item_number {
display: inline-block;
@include font(3em, 1em, var(--theme-font-h5_font-weight));
color: var(--theme-color-alter_dark);
+ .sc_services_item_info {
margin-top: 1.6em;
}
}
.sc_services_item_info {
position: relative;
padding-top: 0.7em;
.sc_services_item_text {
+ .sc_services_item_button {
margin-top: 1em;
}
p:last-child {
margin-bottom: 0;
}
}
&:before {
@include abs-ct;
content: '';
display: block;
@include box(34px, 1px);
background-color: var(--theme-color-alter_dark);
}
}
.sc_services_item_text {
@include font(17px, 1.5em);
}
.sc_services_item_title {
margin: 0;
&.with_price {
.sc_services_item_price {
margin: 0.2em 0;
}
}
}
.sc_services_item_subtitle {
margin-top: 0;
color: var(--theme-color-alter_text);
a {
color: var(--theme-color-alter_text);
}
+ .sc_services_item_title {
margin-top: 0.15em;
}
}
.sc_services_item_more_link {
display: inline-block;
@include font(15px, 21px, 500);
color: var(--theme-color-alter_dark);
.link_text,
.link_icon {
position: relative;
display: inline-block;
vertical-align: middle;
}
.link_icon {
top: 1px;
text-indent: -8px;
opacity: 0;
@include transition(text-indent .3s ease, opacity .3s ease);
&:before {
@include font(11px, inherit, 400, inherit);
content: '\E802';
font-family: $qw_addon_icons;
display: inline-block;
vertical-align: top;
color: currentColor;
}
}
}
&:hover {
.sc_services_item_thumb {
img {
@include transform(scale(1.07, 1.07));
}
}
.sc_services_item_more_link {
.link_icon {
text-indent: 4px;
opacity: 1;
}
}
}
.sc_services_item_link {
@include abs-cover(10);
}
}
}
/* Plaque */
.sc_services_qw-plaque {
.sc_services_item {
position:relative;
text-align: left;
@include flex;
@include box(100%, 100%);
@include border-box;
&:before {
content: ' ';
@include box(0, 0);
padding-top: 117%;
display:inline-block;
}
&.with_more {
.sc_services_item_title_wrap {
max-width: 75%;
}
}
&.with_image {
.sc_services_item_content {
&:before {
content: '';
@include abs-pos(0,0,0,0,-1);
background: rgba(0,0,0,.2);
opacity: 1;
}
&.without_image {
&:before {
display:none;
}
.sc_services_item_icon,
.sc_services_item_number {
color: var(--theme-color-text_dark) !important;
}
}
}
}
&.sc_services_item_featured_none {
.sc_services_item_content {
&:before {
opacity: 0;
}
}
}
.sc_services_item_content {
position: relative;
z-index: 1;
@include flex;
@include bg-cover;
background-color: #2B2F3B;
width: 100%;
max-height:100%;
overflow:hidden;
}
.sc_services_item_content_inner {
position: relative;
padding: 10px;
@include flex;
@include flex-direction(column);
@include flex-justify-content(flex-end);
@include border-box;
width: 100%;
max-height:100%;
}
.sc_services_item_content_inner_top {
@include flex-grow(1);
@include transform(translateY(-15px));
opacity: 0;
will-change: transform, opacity;
@include transition(transform .3s ease-out, opacity .3s ease-out);
}
&:hover .sc_services_item_content_inner_top {
@include transform(translateY(0));
opacity: 1;
}
.sc_services_item_content_inner_bottom {
padding: 1.2em 1em;
width: 100%;
background-color: var(--theme-color-alter_bg_color);
}
.sc_services_item_info_wrap {
overflow: hidden;
padding-bottom: 0.25em;
@include flex;
@include flex-justify-content(space-between);
@include flex-align-items(flex-end);
}
.sc_services_item_icon,
.sc_services_item_pictogram {
position: relative;
display: inline-block;
line-height: 1em;
}
.sc_services_item_pictogram {
img {
height: 2.5em;
}
}
.sc_services_item_icon {
font-size: 2.5em;
color: #FFFFFF;
&.sc_icon_type_svg {
svg {
@include box(1em, 1em);
}
}
}
.sc_services_item_number {
margin-top: 0;
display: inline-block;
@include font(1.8em, 1em, var(--theme-font-h5_font-weight));
letter-spacing: 0;
color: #FFFFFF;
}
.sc_services_item_title {
line-height: 1.2em;
margin: 0;
color: var(--theme-color-alter_dark);
}
.sc_services_item_subtitle {
margin: 0;
color: var(--theme-color-alter_text);
a {
color: var(--theme-color-alter_text);
}
+ .sc_services_item_title {
margin-top: 0.3em;
}
}
.sc_services_item_price {
@include font(1.333em, '', var(--theme-font-h5_font-weight));
margin-bottom: 0.5em;
color: var(--theme-color-alter_dark);
}
.sc_services_item_content {
p {
margin:0;
+ p {
margin-top:0.2em;
}
}
}
.sc_services_item_more_link {
padding: 1px;
position: relative;
display: inline-block;
@include font(15px, 21px, 500);
color: var(--theme-color-text_dark);
overflow: hidden;
.link_text {
display: none;
position: relative;
margin-right: 0;
vertical-align: middle;
text-indent: -110px;
visibility: hidden;
white-space: nowrap;
opacity: 0;
@include transition(visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease);
will-change: visibility, margin-right, text-indent, opacity;
}
.link_icon {
position: relative;
display: inline-block;
vertical-align: middle;
&:before {
@include font(12px, inherit, 400, inherit);
content: '\E802';
font-family: $qw_addon_icons;
display: inline-block;
vertical-align: top;
color: currentColor;
@include transition(transform .3s ease);
}
}
}
.sc_services_item_text {
height: 0;
opacity: 0;
max-width: 95%;
@include font(17px, 25px);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@include transition( height .3s ease-out, margin-top .3s ease-out, opacity .3s ease-out);
}
.sc_services_item_link {
@include abs-cover(10);
}
&:hover {
.sc_services_item_text {
opacity: 1;
height: 25px;
}
.sc_services_item_info_wrap {
+ .sc_services_item_text {
margin-top: 5px;
}
}
.sc_services_item_more_link .link_icon {
&:before {
@include transform(rotate(-45deg));
}
}
.sc_services_item_more_link {
.link_text {
opacity: 1;
text-indent: 0;
margin-right: 6px;
visibility: visible;
@include transition(visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease);
}
}
}
}
[class*="column-"],
.slider-slide {
.sc_services_item {
&.with_image {
.sc_services_item_content {
&.without_image {
background-color: var(--theme-color-text_link_007);
}
}
}
}
}
[class*="column-"]:nth-child(3n-1),
.slider-slide:nth-child(3n-1) {
.sc_services_item {
&.with_image {
.sc_services_item_content {
&.without_image {
background-color: var(--theme-color-text_link2_007);
}
}
}
}
}
[class*="column-"]:nth-child(3n),
.slider-slide:nth-child(3n) {
.sc_services_item {
&.with_image {
.sc_services_item_content {
&.without_image {
background-color: var(--theme-color-text_link3_007);
}
}
}
}
}
}
/* Tricolore */
.sc_services_qw-tricolore {
.slider_container {
padding-top: 8px;
}
.sc_services_item {
@include flex;
position: relative;
z-index: 1;
text-align: left;
@include box(100%, 100%);
@include box-sizing(border-box);
@include transform(translateY(0));
@include transition(transform 0.2s ease-out);
will-change: transform;
&:hover {
@include transform(translateY(-8px));
}
&:before {
content: '';
@include box(0, 0);
padding-top: 112%;
display:inline-block;
}
.sc_services_item_content {
position: relative;
z-index: 1;
@include flex;
@include bg-cover;
width: 100%;
max-height: 100%;
background-color: var(--theme-color-alter_bg_color);
}
.sc_services_item_content_inner {
position: relative;
z-index: 1;
@include flex;
@include flex-direction(column);
@include flex-justify-content(flex-end);
@include flex-align-items(flex-start);
@include border-box;
width: 100%;
max-height: 100%;
overflow: hidden;
padding: 2.6em 2.2em;
}
.sc_services_item_content_inner_top {
width: 100%;
line-height: 1em;
@include flex;
@include flex-align-items(center);
@include flex-justify-content(space-between);
+ .sc_services_item_content_inner_bottom {
margin-top: 5em;
}
}
.sc_services_item_content_inner_bottom {
width: 100%;
@include flex;
@include flex-direction(column);
@include flex-justify-content(flex-end);
@include flex-grow(1);
}
&.with_image {
.sc_services_item_content {
&:before {
content: '';
@include abs-pos(0,0,0,0, -1);
background-color: var(--theme-color-alter_bg_color);
opacity: 1;
@include transition(opacity .3s ease);
will-change: opacity;
}
}
}
.sc_services_item_thumb {
@include bg-cover;
display: block;
font-size:2em;
@include square(2em);
overflow:hidden;
@include border-radius(50%);
}
.sc_services_item_icon,
.sc_services_item_pictogram {
position: relative;
display: inline-block;
line-height: 1em;
}
.sc_services_item_pictogram {
img {
height: 3em;
}
}
.sc_services_item_icon {
font-size: 3em;
color: var(--theme-color-alter_link);
&.sc_icon_type_svg {
svg {
@include box(1em, 1em);
}
}
}
.sc_services_item_number {
display: inline-block;
@include font(2.5em, 1em, var(--theme-font-h5_font-weight));
color: var(--theme-color-alter_dark);
}
.sc_services_item_thumb,
.sc_services_item_icon,
.sc_services_item_pictogram,
.sc_services_item_number {
+ .sc_services_item_title {
margin-top: 20px;
}
}
.sc_services_item_info_wrap {
position: relative;
margin-top: 1.9em;
padding-top: 1.8em;
&:before {
@include abs-lt;
content: '';
display: block;
@include box(100%, 1px);
@include border-box;
opacity: .1;
background-color: var(--theme-color-text_dark);
}
}
.sc_services_item_title {
margin: 0;
color: var(--theme-color-alter_dark);
@include font(var(--theme-font-h2_font-size), var(--theme-font-h2_line-height));
a {
color: var(--theme-color-alter_dark);
}
}
.sc_services_item_subtitle {
margin-top: 0;
color: var(--theme-color-alter_dark);
a {
color: var(--theme-color-alter_dark);
}
}
.sc_services_item_decor {
position: relative;
display: inline-block;
color: var(--theme-color-alter_dark);
&:before {
display: inline-block;
@include font(13px, '', 400);
content: '\E802';
font-family: $qw_addon_icons;
@include transform(rotate(-45deg));
}
}
.sc_services_item_price {
@include font(1.5em, '', var(--theme-font-h5_font-weight));
color: var(--theme-color-alter_dark);
+ .sc_services_item_button {
margin-top: 1em;
}
}
.sc_services_item_text {
@include font(17px, 1.5em);
color: var(--theme-color-alter_dark_08);
+ .sc_services_item_price,
+ .sc_services_item_button {
margin-top: 0.7em;
}
}
.sc_services_item_content {
color: var(--theme-color-alter_text);
p {
margin:0;
+ p {
margin-top:0.2em;
}
}
}
.sc_services_item_more_link {
position: relative;
display: inline-block;
@include font(15px, 21px, 500);
color: var(--theme-color-alter_dark);
overflow: hidden;
.link_text {
display: inline-block;
position: relative;
margin-right: 0;
vertical-align: middle;
text-indent: -110px;
visibility: hidden;
white-space: nowrap;
opacity: 0;
@include transition(visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease);
will-change: visibility, margin-right, text-indent, opacity;
}
.link_icon {
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
&:before {
@include font(11px, inherit, 400, inherit);
content: '\E802';
font-family: $qw_addon_icons;
display: inline-block;
vertical-align: top;
color: currentColor;
}
}
}
&:hover .sc_services_item_more_link,
.sc_services_item_more_link:hover {
color: var(--theme-color-alter_dark);
.link_text {
opacity: 1;
text-indent: 0;
margin-right: 10px;
visibility: visible;
@include transition(visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease);
}
}
.sc_services_item_link {
@include abs-cover(10);
}
}
/* Second Item */
[class*="column-"]:nth-child(3n-1),
.slider-slide:nth-child(3n-1) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_link);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_link);
}
.sc_services_item_text {
color: var(--theme-color-inverse_link_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_link);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_link);
}
}
}
}
}
/* Third Item */
[class*="column-"]:nth-child(3n),
.slider-slide:nth-child(3n) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_dark);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_hover);
}
.sc_services_item_text {
color: var(--theme-color-inverse_hover_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_hover);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_dark);
}
}
}
}
}
/* Link2 Style */
&.color_style_link2 {
.sc_services_item {
.sc_services_item_icon {
color: var(--theme-color-alter_link2);
}
}
[class*="column-"]:nth-child(3n-1),
.slider-slide:nth-child(3n-1) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_link2);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_link);
}
.sc_services_item_text {
color: var(--theme-color-inverse_link_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_link);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_link2);
}
}
}
}
}
[class*="column-"]:nth-child(3n),
.slider-slide:nth-child(3n) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_dark);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_hover);
}
.sc_services_item_text {
color: var(--theme-color-inverse_hover_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_hover);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_dark);
}
}
}
}
}
}
/* Link3 Style */
&.color_style_link3 {
.sc_services_item {
.sc_services_item_icon {
color: var(--theme-color-alter_link3);
}
}
[class*="column-"]:nth-child(3n-1),
.slider-slide:nth-child(3n-1) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_link3);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_link);
}
.sc_services_item_text {
color: var(--theme-color-inverse_link_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_link);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_link3);
}
}
}
}
}
[class*="column-"]:nth-child(3n),
.slider-slide:nth-child(3n) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_dark);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_hover);
}
.sc_services_item_text {
color: var(--theme-color-inverse_hover_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_hover);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_dark);
}
}
}
}
}
}
/* Dark Style */
&.color_style_dark {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_dark);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_hover);
}
.sc_services_item_text {
color: var(--theme-color-inverse_hover_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_hover);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_dark);
}
}
}
}
[class*="column-"]:nth-child(3n-1),
.slider-slide:nth-child(3n-1) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_link);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_link);
}
.sc_services_item_text {
color: var(--theme-color-inverse_link_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_link);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_link);
}
}
}
}
}
[class*="column-"]:nth-child(3n),
.slider-slide:nth-child(3n) {
.sc_services_item {
.sc_services_item_content {
background-color: var(--theme-color-alter_link2);
}
.sc_services_item_decor,
.sc_services_item_subtitle,
.sc_services_item_subtitle a,
.sc_services_item_title,
.sc_services_item_title a,
.sc_services_item_icon,
.sc_services_item_price,
.sc_services_item_price .amount,
.sc_services_item_number,
.sc_services_item_more_link {
color: var(--theme-color-inverse_link);
}
.sc_services_item_text {
color: var(--theme-color-inverse_link_08);
}
.sc_services_item_info_wrap {
&:before {
background-color: var(--theme-color-inverse_link);
opacity: .3;
}
}
&.with_image {
.sc_services_item_content {
&:before {
background-color: var(--theme-color-alter_link2);
}
}
}
}
}
}
}
/* Nodes */
.sc_services_qw-nodes {
--qw-var-services-nodes-item-marker-size: 56px;
--qw-var-services-nodes-item-large-indent: 8.2em;
--qw-var-services-nodes-item-medium-indent: 4.5em;
.sc_services_item {
padding-top:0.0001px;
position:relative;
&:hover {
.sc_services_item_marker {
color: var(--theme-color-inverse_hover);
background-color: var(--theme-color-text_dark);
}
}
&.sc_services_item_featured_none {
.sc_services_item_timeline {
display: none;
}
+ .sc_services_item {
margin-top: 1em;
}
}
&.sc_services_item_featured_top,
&.sc_services_item_featured_bottom {
.sc_services_item_info {
padding: 0.5em 1.5em 1.5em 0;
}
}
&.sc_services_item_featured_left,
&.sc_services_item_featured_right {
.sc_services_item_info {
padding: 0.5em 0 2.3em 0;
}
}
&.sc_services_item_featured_top {
padding-top: var(--qw-var-services-nodes-item-medium-indent);
.sc_services_item_marker {
left: 0;
top: 0;
}
.sc_services_item_timeline {
top: calc(var(--qw-var-services-nodes-item-marker-size) / 2);
left: calc(var(--qw-var-services-nodes-item-marker-size) + var(--qw-var-services-nodes-item-marker-size) / 2.7);
right: calc(var(--qw-var-services-nodes-item-marker-size) / 2.7);
border-width: 1px 0 0 0;
@include box(auto, 1px);
}
}
&.sc_services_item_featured_bottom {
padding-bottom: var(--qw-var-services-nodes-item-medium-indent);
.sc_services_item_marker {
left: 0;
bottom: 0;
}
.sc_services_item_timeline {
bottom: calc(var(--qw-var-services-nodes-item-marker-size) / 2);
left: calc(var(--qw-var-services-nodes-item-marker-size) + var(--qw-var-services-nodes-item-marker-size) / 2.7);
right: calc(var(--qw-var-services-nodes-item-marker-size) / 2.7);
border-width: 1px 0 0 0;
@include box(auto, 1px);
}
}
&.sc_services_item_featured_left {
padding-left: var(--qw-var-services-nodes-item-large-indent);
.sc_services_item_marker {
left: 0;
top: 0;
}
.sc_services_item_timeline {
top: calc(var(--qw-var-services-nodes-item-marker-size) + var(--qw-var-services-nodes-item-marker-size) / 2.7);
left: calc(var(--qw-var-services-nodes-item-marker-size) / 2);
bottom: calc(var(--qw-var-services-nodes-item-marker-size) / 2.7);
border-width: 0 1px 0 0;
@include box(1px, auto)
}
}
&.sc_services_item_featured_right {
padding-right:var(--qw-var-services-nodes-item-large-indent);
.sc_services_item_marker {
right: 0;
top: 0;
}
.sc_services_item_timeline {
top: calc(var(--qw-var-services-nodes-item-marker-size) + var(--qw-var-services-nodes-item-marker-size) / 2.7);
right: calc(var(--qw-var-services-nodes-item-marker-size) / 2);
bottom: calc(var(--qw-var-services-nodes-item-marker-size) / 2.7);
border-width: 0 1px 0 0;
@include box(1px, auto);
}
}
.sc_services_item_info {
.post_featured{
min-width: 100%;
height: auto;
img {
min-width: 100%;
height: auto;
}
}
}
.sc_services_item_timeline {
display: block;
position: absolute;
z-index: 1;
border-style: solid;
border-color: var(--theme-color-bd_color);
}
.sc_services_item_marker {
position: absolute;
z-index: 2;
display: block;
font-size: 1.25em;
@include square(var(--qw-var-services-nodes-item-marker-size));
margin-bottom: 0;
color: var(--theme-color-alter_dark);
background-color: var(--theme-color-alter_bg_color);
overflow: hidden;
@include border-round;
@include transition-all;
img {
height: 1em;
@include abs-cc;
}
}
.sc_services_item_icon {
&.sc_icon_type_svg {
svg {
@include box(1em, 1em);
position: relative;
top: 2px;
}
}
}
.sc_services_item_thumb {
@include bg-cover;
}
.sc_services_item_number {
font-weight: var(--theme-font-h5_font-weight);
line-height: 2.4em;
}
.sc_services_item_header {
+ .sc_services_item_text,
+ .sc_services_item_button {
margin-top: 1.1em;
}
}
.sc_services_item_title {
position: relative;
z-index: 2;
margin: 0;
color: var(--theme-color-text_dark);
a {
color: var(--theme-color-text_dark);
}
&.with_price {
.sc_services_item_price {
margin: 0.4em 0;
}
}
}
.sc_services_item_subtitle {
margin: 0;
color: var(--theme-color-text);
a {
color: var(--theme-color-text);
&:hover {
color: var(--theme-color-text_dark);
}
}
+ .sc_services_item_title {
margin-top: 0.2em;
}
}
.sc_services_item_text {
@include font(17px, 1.5em);
p {
margin:0;
+ p {
margin-top: 0.2em;
}
}
+ .sc_services_item_button {
margin-top: 1em;
}
}
.sc_services_item_more_link {
position: relative;
display: inline-block;
@include font(15px, 21px, 500);
color: var(--theme-color-text_dark);
overflow: hidden;
.link_text {
display: inline-block;
position: relative;
margin-right: 0;
vertical-align: middle;
text-indent: -110px;
visibility: hidden;
white-space: nowrap;
opacity: 0;
@include transition(visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease);
will-change: visibility, margin-right, text-indent, opacity;
}
.link_icon {
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
&:before {
@include font(11px, inherit, 400, inherit);
content: '\E802';
font-family: $qw_addon_icons;
display: inline-block;
vertical-align: top;
color: currentColor;
}
}
&:hover {
color: var(--theme-color-text_dark);
.link_text {
opacity: 1;
text-indent: 0;
margin-right: 10px;
visibility: visible;
@include transition(visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease);
}
}
}
}
/* Remove line from last element */
[class*="columns_1"] {
> .sc_services_item:last-child {
.sc_services_item_timeline {
border-width: 0;
}
.sc_services_item_info {
padding-bottom: 0;
}
}
}
[class*="trx_addons_column-"]:last-child {
.sc_services_item {
.sc_services_item_timeline {
border-width: 0;
}
.sc_services_item_info {
padding-bottom: 0;
}
}
}
}