pushing all files
This commit is contained in:
925
public/assets/sass/default/_common.scss
Normal file
925
public/assets/sass/default/_common.scss
Normal file
@ -0,0 +1,925 @@
|
||||
/*------------------------------------------------------------------------
|
||||
|
||||
Template Name: Conbix - Business Consulting Next js Template
|
||||
Author: ThemeOri
|
||||
Author URI: http://themeori.com
|
||||
Version: 1.0.2
|
||||
Description: This Template is created for web template
|
||||
|
||||
--------------------------------------------------------------------------
|
||||
TABLE OF CONTENTS
|
||||
--------------------------------------------------------------------------
|
||||
|
||||
* Google Fonts
|
||||
* Common CSS
|
||||
* Form CSS
|
||||
* Hedging CSS
|
||||
* Conbix Button And Title Styles CSS
|
||||
* Conbix Text Style CSS
|
||||
* Scroll Top CSS
|
||||
* Preloader CSS
|
||||
* Animation CSS
|
||||
* Conbix Color CSS
|
||||
* Dark CSS
|
||||
* Dark Light Switch CSS
|
||||
* Space And Container CSS
|
||||
* Top Bar CSS
|
||||
* Top Bar Three CSS
|
||||
* Menu Bar Sticky CSS
|
||||
* Menu Bar CSS
|
||||
* Menu Sidebar CSS
|
||||
* Header Two CSS
|
||||
* Header Three CSS
|
||||
* Menu Responsive CSS
|
||||
* Banner One CSS
|
||||
* Banner Two CSS
|
||||
* Banner Three CSS
|
||||
* About One CSS
|
||||
* About Two CSS
|
||||
* About Three CSS
|
||||
* About Company CSS
|
||||
* Company Two CSS
|
||||
* About Solution CSS
|
||||
* Company History CSS
|
||||
* Features CSS
|
||||
* Consulting CSS
|
||||
* Work CSS
|
||||
* Services CSS
|
||||
* Services Two CSS
|
||||
* Services Three CSS
|
||||
* Services Page CSS
|
||||
* Services Details CSS
|
||||
* Cta CSS
|
||||
* Cta Two CSS
|
||||
* Get In Touch CSS
|
||||
* Get In Touch Three CSS
|
||||
* Help CSS
|
||||
* Pricing CSS
|
||||
* Pricing Two CSS
|
||||
* Team CSS
|
||||
* Team Two CSS
|
||||
* Team Three CSS
|
||||
* Team Details CSS
|
||||
* Testimonial CSS
|
||||
* Testimonial Two CSS
|
||||
* Choose Us CSS
|
||||
* FAQ CSS
|
||||
* FAQ Two CSS
|
||||
* Project CSS
|
||||
* Portfolio One CSS
|
||||
* Portfolio Two CSS
|
||||
* Portfolio Three CSS
|
||||
* Conbix Filter CSS
|
||||
* Project Filter CSS
|
||||
* Project Details CSS
|
||||
* Solution CSS
|
||||
* Solution Two CSS
|
||||
* Experience CSS
|
||||
* Subscribe One CSS
|
||||
* Subscribe Two CSS
|
||||
* Blog One CSS
|
||||
* Blog Two CSS
|
||||
* Blog Three CSS
|
||||
* News Details CSS
|
||||
* News Standard CSS
|
||||
* Conbix Contact CSS
|
||||
* Contact Page CSS
|
||||
* Contact Two CSS
|
||||
* Contact Three CSS
|
||||
* Contact Four CSS
|
||||
* Request Quote CSS
|
||||
* Footer Top CSS
|
||||
* Footer One CSS
|
||||
* Footer Two CSS
|
||||
* Footer Three CSS
|
||||
* All Footer CSS
|
||||
* Copyright One CSS
|
||||
* Copyright Two CSS
|
||||
* Copyright Three CSS
|
||||
* All Side Bar CSS
|
||||
* Post CSS
|
||||
* Theme Pagination CSS
|
||||
* Page Banner CSS
|
||||
* Error CSS
|
||||
* Contact CSS
|
||||
|
||||
/*==========================================================================
|
||||
Common CSS
|
||||
==========================================================================*/
|
||||
body {
|
||||
font-family: var(--body-font);
|
||||
color: var(--body-color);
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
transition: 0.4s;
|
||||
}
|
||||
a {
|
||||
outline: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a,
|
||||
button,
|
||||
i {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.section-padding {
|
||||
padding: 120px 0;
|
||||
}
|
||||
.section-padding-two {
|
||||
padding: 95px 0 120px 0;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.section-padding {
|
||||
padding: 90px 0;
|
||||
}
|
||||
.section-padding-two {
|
||||
padding: 65px 0 90px 0;
|
||||
}
|
||||
}
|
||||
.display-none {
|
||||
display: none;
|
||||
}
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
.filter img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.img__full {
|
||||
width: 100%;
|
||||
}
|
||||
/*==========================================================================
|
||||
Form CSS
|
||||
==========================================================================*/
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
border: 1px solid var(--border-color-2);
|
||||
border-color: transparent;
|
||||
border-radius: 6px;
|
||||
background: var(--primary-color-1);
|
||||
color: var(--text-white);
|
||||
padding: 17px 40px;
|
||||
}
|
||||
button:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="submit"]:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
button:active,
|
||||
button:focus,
|
||||
input[type="button"]:active,
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:active,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:active,
|
||||
input[type="submit"]:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="number"],
|
||||
input[type="tel"],
|
||||
input[type="range"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="color"],
|
||||
textarea {
|
||||
color: var(--body-color);
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: 1px solid var(--border-color-2);
|
||||
padding: 0 15px;
|
||||
background: var(--bg-white);
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="range"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="color"]:focus,
|
||||
textarea:focus {
|
||||
color: var(--text-heading-color);
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: var(--primary-color-1);
|
||||
}
|
||||
select {
|
||||
border: 1px solid var(--border-color-2);
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
button,
|
||||
button:hover,
|
||||
button:focus {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
/*==========================================================================
|
||||
Hedging CSS
|
||||
==========================================================================*/
|
||||
$list: (h1, 70px, 80px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h2, 48px, 60px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h3, 30px, 40px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h4, 24px, 34px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h5, 22px, 32px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(h6, 20px, 30px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
|
||||
(p, 16px, 30px, 0, 0);
|
||||
@each $name, $size, $height, $p, $m, $color, $font, $weight in $list {
|
||||
#{$name}{
|
||||
font-size: $size;
|
||||
line-height: $height;
|
||||
padding: $p;
|
||||
margin: $m;
|
||||
color: $color;
|
||||
font-family: $font;
|
||||
font-weight: $weight;
|
||||
}
|
||||
}
|
||||
$list: left, center, right;
|
||||
@each $i in $list {
|
||||
.t-#{$i} {
|
||||
text-align: $i;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
h2 {
|
||||
font-size: 45px;
|
||||
line-height: 55px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
h2 {
|
||||
font-size: 31px;
|
||||
line-height: 41px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 359px) {
|
||||
h2 {
|
||||
font-size: 27px;
|
||||
line-height: 37px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
line-height: 31px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Conbix Button And Title Styles CSS
|
||||
==========================================================================*/
|
||||
.subtitle-one,
|
||||
.subtitle-two,
|
||||
.subtitle-three {
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--heading-font);
|
||||
color: var(--primary-color-1);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
padding-left: 55px;
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 6px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
.subtitle-two {
|
||||
color: var(--primary-color-2);
|
||||
&::before {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
&::after {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
.subtitle-three {
|
||||
color: var(--primary-color-3);
|
||||
&::before {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
&::after {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
.btn-one,
|
||||
.btn-two,
|
||||
.btn-three,
|
||||
.btn-four,
|
||||
.btn-five,
|
||||
.btn-six,
|
||||
.btn-seven,
|
||||
.btn-eight,
|
||||
.btn-nine {
|
||||
background: var(--primary-color-1);
|
||||
color: var(--text-white);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
padding: 17px 43px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-family: var(--heading-font);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
transition: 0.4s;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
i {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 430px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: var(--btn-heading-color);
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%) translateX(-50%) scale(0);
|
||||
transition: all 0.5s ease-out 0s;
|
||||
z-index: -1;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--text-white);
|
||||
&::before {
|
||||
transform: translateY(-50%) translateX(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
color: var(--text-white);
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
&-two {
|
||||
background: var(--btn-white);
|
||||
color: var(--btn-heading-color);
|
||||
border: 1px solid var(--color-4);
|
||||
padding: 16px 42px;
|
||||
&::before {
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
&-three {
|
||||
background: transparent;
|
||||
color: var(--text-white);
|
||||
border: 1px solid var(--border-white);
|
||||
padding: 16px 42px;
|
||||
&:hover {
|
||||
color: var(--text-white);
|
||||
border-color: var(--primary-color-1);
|
||||
}
|
||||
&::before {
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--text-white);
|
||||
}
|
||||
}
|
||||
&-four {
|
||||
background: var(--btn-heading-color);
|
||||
&::before {
|
||||
background: var(--btn-white);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
&-five {
|
||||
background: var(--primary-color-2);
|
||||
color: var(--text-white);
|
||||
border-radius: 30px;
|
||||
&::before {
|
||||
background: var(--btn-white);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
&-six {
|
||||
background: transparent;
|
||||
border: 1px solid var(--primary-color-2);
|
||||
color: var(--primary-color-2);
|
||||
border-radius: 30px;
|
||||
&:hover {
|
||||
border-color: var(--text-white);
|
||||
}
|
||||
&::before {
|
||||
background: var(--btn-white);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
&-seven {
|
||||
background: var(--primary-color-3);
|
||||
&::before {
|
||||
background: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
&-eight {
|
||||
background: transparent;
|
||||
color: var(--primary-color-3);
|
||||
border: 1px solid var(--primary-color-3);
|
||||
padding: 16px 42px;
|
||||
&:hover {
|
||||
border-color: var(--btn-heading-color);
|
||||
}
|
||||
&::before {
|
||||
background: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
&-nine {
|
||||
background: var(--btn-white);
|
||||
color: var(--text-white);
|
||||
&:hover {
|
||||
color: var(--text-white);
|
||||
}
|
||||
&::before {
|
||||
background: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.simple-btn-1,
|
||||
.simple-btn-2,
|
||||
.simple-btn-3 {
|
||||
color: var(--primary-color-1);
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
font-weight: 700;
|
||||
font-family: var(--heading-font);
|
||||
transition: 0.4s;
|
||||
text-transform: uppercase;
|
||||
i {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--btn-heading-color);
|
||||
}
|
||||
}
|
||||
.simple-btn {
|
||||
&-2 {
|
||||
color: var(--text-heading-color);
|
||||
&:hover {
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
color: var(--text-white);
|
||||
&:hover {
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Conbix Text Style CSS
|
||||
==========================================================================*/
|
||||
.text {
|
||||
&-one {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-two {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-three {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-four {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-five {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-six {
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-seven {
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-eight {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
&-nine {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-heading-color);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Scroll Top CSS
|
||||
==========================================================================*/
|
||||
.scroll-up {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
box-shadow: inset 0 0 0 2px var(--color-8);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(15px);
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: all 200ms linear;
|
||||
&::after {
|
||||
position: absolute;
|
||||
font-family: 'Font Awesome 5 Pro';
|
||||
content: "\f176";
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
color: var(--primary-color-1);
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
transition: all 200ms linear;
|
||||
}
|
||||
&.active-scroll {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
svg path {
|
||||
fill: none;
|
||||
}
|
||||
svg.scroll-circle path {
|
||||
stroke: var(--primary-color-1);
|
||||
stroke-width: 4;
|
||||
box-sizing:border-box;
|
||||
transition: all 200ms linear;
|
||||
}
|
||||
&.two {
|
||||
&::after {
|
||||
color: var(--primary-color-2);
|
||||
}
|
||||
svg.scroll-circle path {
|
||||
stroke: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
&.three {
|
||||
&::after {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
svg.scroll-circle path {
|
||||
stroke: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Preloader CSS
|
||||
==========================================================================*/
|
||||
.theme-loader {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-heading-color);
|
||||
z-index: 9999999999;
|
||||
}
|
||||
.spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
display: flex;
|
||||
}
|
||||
.spinner-bounce {
|
||||
will-change: transform;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color-1);
|
||||
display: inline-block;
|
||||
animation: bounces 1s ease-in-out infinite alternate;
|
||||
transform-origin: 50% 50%;
|
||||
&.one {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&.two {
|
||||
margin-right: 15px;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
&.three {
|
||||
animation-delay: .8s;
|
||||
}
|
||||
}
|
||||
@keyframes bounces {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
50% {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(.2);
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Animation CSS
|
||||
==========================================================================*/
|
||||
.video {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
z-index: 4;
|
||||
span {
|
||||
position: relative;
|
||||
color: var(--primary-color-2);
|
||||
font-size: 20px;
|
||||
z-index: 1;
|
||||
background: var(--bg-white);
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.video-pulse::after, .video-pulse::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--border-white);
|
||||
opacity: 0.3;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
animation-duration: 2.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-name: video-animation;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.video-pulse::before {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.modal-video-close-btn {
|
||||
padding: 0
|
||||
}
|
||||
@keyframes video-animation {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
.content__roll {
|
||||
animation: roll 10s infinite linear;
|
||||
}
|
||||
@keyframes roll {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-359deg);
|
||||
}
|
||||
}
|
||||
.roll {
|
||||
animation: rotation 2s infinite linear;
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
.left-right-animate {
|
||||
animation-name: left-right;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes left-right {
|
||||
0% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.left-right-animate2 {
|
||||
animation-name: left-right2;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes left-right2 {
|
||||
0% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(110px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-animation {
|
||||
animation: icon-animation 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes icon-animation {
|
||||
|
||||
from {
|
||||
transform:rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
20%, 32%, 44%, 56%, 68% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
23%, 35%, 47%, 59%, 71% {
|
||||
transform: rotate3d(0,0,1,15deg);
|
||||
}
|
||||
26%, 38%, 50%, 62%, 74% {
|
||||
transform: rotate3d(0,0,1,0deg);
|
||||
}
|
||||
29%, 41%, 53%, 65%, 77% {
|
||||
transform: rotate3d(0,0,1,-15deg);
|
||||
}
|
||||
80% {
|
||||
transform:rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes animation {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateY {
|
||||
100% {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev::after {
|
||||
display: none;
|
||||
}
|
||||
.swiper-button-next::after {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user