You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
cosmopet-architecture/wp-content/themes/cosmopet/static/css/new-front-page.css

1655 lines
37 KiB

main {
padding-top: 0px;
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
}
.new-container {
max-width:1240px;
margin: 0 auto;
}
/* Main Slider */
.swiper-container {
width: 100%;
height: 100vh;
}
.main-slider .swiper-slide {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding-top: 85px;
padding-left: 60px;
}
.swiper-fade .swiper-slide {
transition-property: opacity;
}
.swiper-fade .swiper-slide {
pointer-events: auto;
}
.swiper-fade .swiper-slide .swiper-slide-active {
opacity: 1;
}
.overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(29, 78, 216, 0.8), transparent);
}
.content {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
color: white;
z-index: 10;
}
.main-slider-content_title {
font-weight: 700;
font-size: 48px;
line-height: 117%;
text-transform: uppercase;
color: #fff;
margin-bottom: 32px;
width: 45%;
}
.main-slider-content_descr {
font-weight: 700;
font-size: 20px;
line-height: 120%;
color: #fff;
margin-bottom: 32px;
width: 45%;
}
.main-slider-content_btn {
width: 159px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background-color: #fff;
font-weight: 700;
font-size: 20px;
line-height: 120%;
color: #121212;
border: 2px solid #fff;
border-radius: 100px;
}
/* Main About */
.main-about {
/* box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15); */
background: #f2f2f2;
border-radius: 60px 60px 0px 0px;
padding: 55px 65px;
margin-top: -50px;
position: relative;
z-index: 90;
}
.main-about_title {
font-weight: 700;
font-size: 40px;
color: #121212;
}
.main-about-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.main-about_text {
font-weight: 500;
font-size: 20px;
color: #121212;
}
.main-about_banner {
height: 255px;
border-radius: 40px;
padding: 40px 40px 24px 40px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.main-about_banner-title {
font-weight: 400;
font-size: 24px;
color: #f2f2f2;
}
.main-about_banner-divider {
border-radius: 100px;
width: 108px;
height: 1px;
background: #f2f2f2;
}
.main-about_banner-descr {
font-weight: 400;
font-size: 16px;
color: #f2f2f2;
max-width: 50%;
}
.main-about_banner-btn {
border: 2px solid #f2f2f2;
border-radius: 100px;
width: 333px;
height: 48px;
display: flex;
justify-content: space-around;
align-items: center;
gap: 20px;
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: #fff;
}
/* Main Why */
.main-why {
background: #f2f2f2;
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
}
.main-why_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.main-why_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-top: 5%;
}
.main-why_item {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 40px;
padding: 40px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.main-why_item-title {
font-weight: 700;
font-size: 20px;
color: #121212;
max-width: 50%;
}
.main-why_item-descr {
font-weight: 500;
font-size: 14px;
color: #121212;
margin-bottom: 7%;
}
.main-why_item-image {
position: absolute;
top: -25%;
right: 5%;
}
.main-why_item-index {
position: absolute;
bottom: 3%;
right: 3%;
font-weight: 500;
font-size: 48px;
text-align: right;
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-why_bottom {
margin-top: 25px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 40px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.main-why_bottom-text {
font-weight: 500;
font-size: 16px;
text-align: center;
color: #121212;
}
.main-why_bottom-logos {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
}
/* Main Ingredients */
.main-ingredients {
background: #f2f2f2;
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
}
.main-ingredients_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.main-ingredients .swiper {
width: 100%;
height: 320px;
padding: 0 60px;
position: relative;
overflow: visible;
}
.main-ingredients .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
opacity: 0.3;
transform: scale(0.7);
}
.main-ingredients .swiper-slide-active {
opacity: 1;
transform: scale(1);
}
.ingredient-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
width: 240px;
height: 320px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.main-ingredients .swiper-slide-active .ingredient-card {
/* background-image: url(/wp-content/themes/cosmopet/static/img/border.png); */
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.ingredient-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin-bottom: 30px;
}
.ingredients-swiper .swiper-slide {
transition: all 0.3s ease-in-out;
}
.ingredients-swiper .swiper-wrapper {
justify-content: center;
}
.ingredients-swiper .swiper-slide {
transition: all 0.4s ease;
transform-origin: center center;
}
.protein .ingredient-icon {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
.prebiotics .ingredient-icon {
background: linear-gradient(135deg, #c8e6c9, #4caf50);
}
.omega .ingredient-icon {
background: linear-gradient(135deg, #ffcc80, #ff9800);
}
.ingredient-title {
font-size: 1.1rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ingredient-description {
font-size: 0.9rem;
color: #555;
line-height: 1.5;
opacity: 0.8;
}
.main-ingredients .swiper-button-next,
.main-ingredients .swiper-button-prev {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
color: #2c3e50;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.main-ingredients .swiper-button-next:hover,
.main-ingredients .swiper-button-prev:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.main-ingredients .swiper-button-next::after,
.main-ingredients .swiper-button-prev::after {
font-size: 16px;
font-weight: 600;
}
.main-ingredients .swiper-button-next {
right: 10px;
}
.main-ingredients .swiper-button-prev {
left: 10px;
}
.ingredients-swiper .swiper-wrapper {
perspective: 1200px;
}
.ingredients-swiper .swiper-slide {
transition: all 0.5s ease;
transform-origin: center center;
filter: blur(1px);
}
.ingredients-swiper .swiper-slide-active {
filter: none;
}
@media (max-width: 768px) {
.main-ingredients .swiper {
padding: 0 40px;
}
.ingredient-card {
width: 260px;
height: 300px;
padding: 30px 20px;
}
.title {
font-size: 2rem;
margin-bottom: 40px;
}
}
/* Main Specialists */
.main-specialists {
background: #f2f2f2;
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 0px 0px 60px 60px;
}
.main-specialists .new-container {
position: relative;
}
.main-specialists_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.main-specialists {
padding: 40px 0;
position: relative;
}
.main-specialists_wrapper {
margin-top: 20px;
}
.main-specialists_item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
gap: 40px;
}
.reverse {
flex-direction: column-reverse;
}
.main-specialists_bio {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-bottom: 15px;
padding: 8px;
border-radius: 40px;
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
}
.main-specialists_bio-image img {
width: 110px;
height: 125px;
border-radius: 32px;
object-fit: cover;
max-width: none;
}
.main-specialists_bio-info {
text-align: left;
}
.main-specialists_bio-name {
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #fff;
}
.main-specialists_bio-position {
font-weight: 500;
font-size: 14px;
color: #fff;
}
.main-specialists_text {
border-radius: 25px;
padding: 16px;
width: 348px;
background: #fff;
font-weight: 500;
font-size: 20px;
color: #121212;
position: relative;
}
.main-specialists_text svg {
position: absolute;
top: -25px;
left: 1%;
}
.reverse .main-specialists_text svg {
position: absolute;
bottom: -25px;
left: 5%;
top: unset;
transform: rotate(180deg) scaleX(-1); /* Зеркальное отражение по горизонтали */
}
.main-specialists .swiper-button-next,
.main-specialists .swiper-button-prev {
color: #333;
border: 1px solid #121212;
border-radius: 20px;
padding: 16px;
width: 56px;
height: 56px;
}
.main-specialists .swiper-button-next::after,
.main-specialists .swiper-button-prev::after {
content: none;
}
.main-specialists .swiper-pagination {
display: none;
}
.main-specialists .swiper-pagination-bullet {
background: #333;
display: none;
}
.main-specialists_arrows {
position: absolute;
right: 10%;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}
.swiper-button-next{
right: var(--swiper-navigation-sides-offset, -70px)!important;
left: auto;
}
.swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -70px)!important;
right: auto;
}
@media (max-width: 767px) {
.main-specialists_item {
padding: 15px;
}
.main-specialists_bio-image img {
width: 60px;
height: 60px;
}
.main-specialists_bio-name {
font-size: 16px;
}
.main-specialists_bio-position {
font-size: 12px;
}
}
/* Main Food */
.main-food {
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 0px 0px 60px 60px;
}
.main-food_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #f4f1f0;
margin-bottom: 20px;
}
.main-food_wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.main-food_products {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.main-food_products-card {
border-radius: 30px;
padding: 8px;
width: 265px;
height: 500px;
min-width: 194px;
}
.main-food_products .even {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #c8f0ff;
}
.main-food_products .odd {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #ffe9e9;
}
.main-food_products-card-img {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
.shadow-svg {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-65%);
width: 80%;
height: auto;
z-index: 0;
pointer-events: none;
}
.main-food_products-card-img img {
position: relative;
z-index: 1;
display: block;
max-width: 80%;
height: auto;
}
.even .main-food_products-card-title {
padding: 8px 16px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #48c1ed;
}
.odd .main-food_products-card-title {
padding: 8px 8px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #cd0003;
}
.main-food_products-card-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 10px;
}
.even .main-food_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-food_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #cd0003;
display: flex;
justify-content: center;
align-items: center;
}
.even .main-food_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #48c1ed;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-food_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #cd0003;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-food_reviews {
max-width: 400px;
}
.main-food_reviews {
border-radius: 40px;
padding: 24px;
max-width: 395px;
height: 772px;
position: relative;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
background: #fff;
}
.main-food_reviews-title {
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
color: #121212;
}
.main-food_reviews-slider {
position: relative;
}
.main-food_reviews-slide {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: 650px;
}
.main-food_reviews-slide-img {
border: 2px solid #fff;
border-radius: 32px;
object-fit: cover;
margin-bottom: 10px;
}
.main-food_reviews-slide-name {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-position {
font-weight: 500;
font-size: 14px;
line-height: 140%;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slide-text {
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
margin-bottom: 10px;
}
.main-food_reviews-slider {
position: relative;
height: 97%;
}
.main-food_reviews-slider-index {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40px;
z-index: 100;
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
}
.main-food_arrows {
position: absolute;
right: 20%;
bottom: 8%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.main-food .swiper-button-next,
.main-food .swiper-button-prev {
color: #333;
border: 1px solid #121212;
border-radius: 20px;
padding: 16px;
width: 56px;
height: 56px;
}
.main-food .swiper-button-next::after,
.main-food .swiper-button-prev::after {
content: none;
}
.main-food .swiper-pagination {
display: none;
}
.main-food .swiper-pagination-bullet {
background: #333;
display: none;
}
.main-food_arrows .swiper-button-next{
right: var(--swiper-navigation-sides-offset, -65px)!important;
left: auto;
}
.main-food_arrows .swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -65px)!important;
right: auto;
}
.main-food_reviews-star {
position: absolute;
top: 0%;
right: 0%;
z-index: 100;
}
.main-food_link {
max-width: 240px;
justify-content: space-between;
padding: 0 8px;
}
@media (max-width: 767px) {
.main-food_reviews-slide {
padding: 15px;
}
.main-food_reviews-slide-img {
width: 80px;
height: 80px;
}
.main-food_reviews-slide-name {
font-size: 16px;
}
.main-food_reviews-slide-text {
font-size: 12px;
}
.main-food_reviews-slider-index {
font-size: 14px;
}
}
/* Main Reviews */
.main-reviews {
box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15);
background: #f4f1f0;
border-radius: 60px;
padding: 100px 20px;
}
.main-reviews_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.marketplace__swiper, .marketplace__swiper .swiper-wrapper {
height: auto;
}
.marketplace__swiper .swiper-slide {
max-width: max-content;
}
.marketplace__title {
color: var(--grey-black, #121212);
font-family: "Craftwork Grotesk";
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 111.111% */
text-transform: uppercase;
}
.marketplace__swiper {
margin-top: 50px;
margin-left: -70px;
margin-right: -70px;
}
.marketplace {
position: relative;
}
.marketplace:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 222px;
height: 671px;
background: linear-gradient(270deg, #F6F4F3 0%, rgba(242, 242, 242, 0.00) 100%);
z-index: 1;
}
/* Main Treats */
.main-treats {
margin-top: -1%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 0px 0px 60px 60px;
}
.even .main-food_products-card-title {
padding: 8px 16px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #48c1ed;
}
.odd .main-food_products-card-title {
padding: 8px 8px 8px 16px;
border-radius: 100px;
background: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #cd0003;
}
.main-food_products-card-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 10px;
}
.even .main-treats_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #7e0092;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-treats_products-card-bottom-price {
border-radius: 100px;
padding: 10px;
background: #fff;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #863300;
display: flex;
justify-content: center;
align-items: center;
}
.even .main-treats_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #deb3ff;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.odd .main-treats_products-cardbottom-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 32px;
background: #ffbc7b;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-treats_products .even {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #fff1c8;
}
.main-treats_products .odd {
background: linear-gradient(rgba(134, 51, 0, 0.1), rgba(134, 51, 0, 0.1)), #f2e0ff;
}
.main-treats .main-food_products-card {
border-radius: 30px;
padding: 8px;
width: 265px;
height: 424px;
min-width: 194px;
}
.main-treats .shadow-svg {
position: absolute;
bottom: 0;
left: 40%;
transform: translateX(-65%);
width: 80%;
height: auto;
z-index: 0;
pointer-events: none;
}
.main-treats_reviews-slider-index {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 32px;
z-index: 100;
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: #121212;
}
.main-food_arrows {
position: absolute;
right: 20%;
bottom: 8%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.main-treats .swiper-button-next,
.main-treats .swiper-button-prev {
color: #333;
border: 1px solid #121212;
border-radius: 20px;
padding: 16px;
width: 56px;
height: 56px;
}
.main-treats .swiper-button-next::after,
.main-treats .swiper-button-prev::after {
content: none;
}
.main-treats .swiper-pagination {
display: none;
}
.main-treats .swiper-pagination-bullet {
background: #333;
display: none;
}
.main-treats_arrows .swiper-button-next{
right: var(--swiper-navigation-sides-offset, -65px)!important;
left: auto;
}
.main-treats_arrows .swiper-button-prev{
left: var(--swiper-navigation-sides-offset, -65px)!important;
right: auto;
}
.main-treats .main-food_reviews {
border-radius: 40px;
padding: 24px;
max-width: 395px;
height: 713px;
position: relative;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
background: #fff;
}
.main-food_reviews-slide-top {
display: flex;
justify-content: flex-start;
gap: 20px;
align-items: center;
width: 100%;
}
.main-food_reviews-slide-top img {
width: 48px;
height: 48px;
border-radius: 100%;
}
/* Main Smi */
.main-smi {
background: #f4f1f0;
padding: 100px 20px;
border-radius: 0!important;
margin-top: -5%;
}
.smiSlider .slider-arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-47%, -50%);
width: 112%;
display: flex;
justify-content: space-between;
z-index: 40;
pointer-events: none;
}
.smiSlider .slider-arrow{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' fill='white'/%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' stroke='%23121212'/%3e%3cpath d='M37 28.3633H20.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 34.7272' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 21.9993' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
height: 56px;
width: 56px;
background-size: contain;
pointer-events: all;
}
.smiSlider .slider-arrow[disabled]{
visibility: none;
}
.smiSlider .slider-arrow-prev{
transform: scaleX(-1);
margin-right: 24px;
}
.about_smi {
padding-top: 5%;
padding-bottom: 10%;
border-radius: 0px 0px 60px 60px;
}
.smi-card-wrapper{
border-radius: 60px;
background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%);
border-radius: 60px;
padding: 2px;
width: 100%;
height: 484px;
}
.smiSlider{
margin-top: 3rem;
}
.smi-card{
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 480px;
border-radius: 60px;
position: relative;
overflow: hidden;
padding: 28px 35px;
color: #121212;
}
.smi-card::before{
background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
content: '';
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
}
.smi-card-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.smi-card-date, .smi-card-title, .smi-card-label{
position: relative;
z-index: 2;
}
.smi-card-label{
display: flex;
border: 1px solid #121212;
border-radius: 28px;
padding: 4px 15px;
align-items: center;
font-weight: 500;
font-size: 16px;
gap: 6px;
background-color: #fff;
width: max-content;
}
.smi-card-label p{
margin-bottom: 0;
}
.smi-card-title{
font-weight: 700;
font-size: 22px;
text-transform: uppercase; line-height: 120%;
margin-bottom: 7px;
margin-top: 10px;
}
.smi-card-date{
font-weight: 500;
font-size: 12px;
}
.smiSlider.swiper{
overflow: visible;
}
.about_us{
width: 100%;
overflow: hidden;
}
.smi-card-label img{
max-height: 25px;
width: auto;
}
.smi-card-label{
height: 35px;
}
@media (max-width: 640px) {
.smi-card{
padding: 16px;
height: 420px;
border-radius: 30px;
}
.smi-card-title{
font-size: 18px;
}
.smi-card-wrapper{
height: 424px;
border-radius: 30px;
}
}
/* Main bot */
.main-bot {
background: #f4f1f0;
padding: 100px 20px;
margin-top: -5%;
}
.main-bot_wrapper {
border-radius: 60px;
width: 100%;
height: 100%;
min-height: 450px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 40px;
}
.main-bot_wrapper-bottom {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.main-bot_wrapper-bottom-divider {
width: 176px;
height: 2px;
background: #121212;
gap: 20px;
border-radius: 100%;
}
.main-bot_wrapper-tag {
border-radius: 100px;
padding: 4px 10px 6px 10px;
height: 39px;
background: radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1ea49c 45%, #76ce75 90%, #bbe38d 100%);
font-weight: 400;
font-size: 24px;
color: #fff;
margin-bottom: 20px;
}
.main-bot_wrapper-title {
font-weight: 400;
font-size: 50px;
text-transform: uppercase;
color: #121212;
max-width: 50%;
margin-bottom: 40px;
}
.main-bot_wrapper-link {
border: 2px solid #121212;
border-radius: 100px;
width: 174px;
height: 56px;
padding: 9px 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 70px;
}
/* Main Cosmopet X */
.cosmopet-x {
background: #f4f1f0;
padding: 100px 20px;
margin-top: -5%;
overflow: hidden;
border-radius: 0px 0px 60px 60px;
}
.cosmopet-x .main-reviews_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.cosmopet-x__swiper,
.cosmopet-x__swiper .swiper-wrapper {
height: auto;
}
.cosmopet-x__title {
color: var(--creme-white, #F4F1F0);
font-family: "Craftwork Grotesk";
font-size: 82px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.cosmopet-x__swiper {
margin-top: 52px;
position: relative;
}
.cosmopet-x__item {
position: relative;
width: 100%;
height: 484px;
}
.cosmopet-x__item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: 1;
width: 100%;
border-radius: 60px;
border: 2px solid var(--creme-white, #F4F1F0);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%);
}
.cosmopet-x__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
border-radius: 60px;
}
.cosmopet-x__body {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
padding: 36px 35px;
}
.cosmopet-x__heading {
color: var(--grey-black, #121212);
font-family: "Craftwork Grotesk";
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.cosmopet-x__btn {
display: block;
max-width: max-content;
margin-top: 7px;
color: #000;
font-family: "Craftwork Grotesk";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 6px 15px 10px 15px;
border-radius: 28px;
border: 1px solid #000;
background: var(--wh, #FFF);
}
.cosmopet-x__top {
position: absolute;
height: auto;
width: 60%;
top: 43px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.cosmopet-x .slider-arrows {
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 100%;
}
.cosmopet-x .slider-arrows .cosmopet-prev {
left: -30px;
}
.cosmopet-x .slider-arrows .cosmopet-next {
right: -30px;
}
.cosmopet-x .slider-arrow {
background-image: url('data:image/svg+xml,<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="56" height="56" rx="20" fill="white"/><path d="M37 28.364H20.5" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 28.364L30.636 34.728" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 28.364L30.636 22.0001" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')!important;
}
/* Main Gallery */
.main-gallery .mosaic-swiper {
padding: 40px 20px;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Две колонки */
gap: 20px; /* Максимальный gap 20px */
padding: 40px 20px;
max-height: 700px; /* Фиксированная высота контейнера (настройте под нужный размер) */
overflow: hidden;
}
.item {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.large {
grid-column: span 1; /* Занимает одну ячейку */
grid-row: span 2; /* Занимает две строки */
}
.small {
grid-column: span 1; /* Занимает одну ячейку */
grid-row: span 1; /* Занимает одну строку */
}
.full-height {
grid-column: span 2; /* Занимает обе колонки */
grid-row: span 2; /* Занимает две строки */
}
/* Main quiz */
.truth {
border-radius: 60px 60px 0px 0px;
background: var(--creme-white, #F4F1F0);
padding-bottom: 119px;
margin-top: -1px;
padding-top: 60px;
}
.truth .truth_top{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.truth .truth_title{
font-size: 82px;
font-weight: 700;
line-height: 98.4px;
text-align: end;
text-transform: uppercase;
width: 723px;
}
.truth .truth_title span{
color: #76CE75;
}
.truth_top .gift_img{
margin-left: -180px;
}
.truth_top .gift_line-img{
position: absolute;
display: none;
bottom: 150px;
right: 0;
width: 245px;
}
.truth_content {
position: relative;
display: none;
}
.truth_content::after{
content: '';
display: block;
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%);
border-radius: 60px;
top: -2px;
left: -2px;
z-index: 0;
}
.truth_content.active {
display: block;
}
.truth .truth_block{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 480px;
overflow: hidden;
background: var(--creme-white, #F4F1F0);
border-radius: 60px;
box-shadow: 0px 3px 13.5px 0px #00000040;
padding: 25px 34px 0px 63px;
}
.truth .truth_success,
.truth .truth_error {
display: none;
}
.truth .truth_success.show,
.truth .truth_error.show {
display: flex;
}
.truth_block .truth_line{
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 24px;
}
.truth_block .truth_line span{
border: 1px solid var(--grey-black, #121212);
opacity: .6;
width: 73px;
border-radius: 10px;
}
.truth_block .truth_line span.active{
opacity: 1;
}
.truth_block .truth_block-title{
font-weight: 700;
font-size: 48px;
text-transform: uppercase;
color: #121212;
margin-bottom: 40px;
}
.truth_content-end .truth_block-title,
.truth_success .truth_block-title{
background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.truth_error .truth_block-title{
background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.truth_block .truth_block-text{
position: relative;
z-index: 1;
display: flex;
align-items: start;
gap: 26px;
}
.truth_block .truth_end-text{
display: flex;
flex-direction: column;
gap: 21px;
}
.truth_block .truth_block-text p{
font-size: 24px;
font-weight: 700;
line-height: 28.8px;
max-width: 559px;
}
.truth_block .truth_block-text p span{
font-weight: 500;
}
.truth_default .truth_block-text p{
text-transform: uppercase;
}
.truth_error .truth_block-text p,
.truth_success .truth_block-text p {
max-width: 592px;
font-size: 20px;
line-height: 24px;
font-weight: 500;
}
.truth_block .truth_info{
position: absolute;
width: 95%;
bottom: 0;
display: flex;
align-items: end;
justify-content: space-between;
margin-top: -100px;
z-index: 0;
}
.truth_content-end .truth_info{
display: flex;
align-items: center;
justify-content: end;
}
.truth_block .truth_links{
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 56px;
}
.truth_error .truth_links,
.truth_success .truth_links{
gap: 20px;
}
.truth_block .truth_result{
display: flex;
align-items: center;
gap: 23px;
}
.truth_block .truth_result img{
width: 100%;
}
.truth_block .truth_link{
width: 141px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 500;
line-height: 28.8px;
text-align: center;
color: var(--grey-black, #121212);
border: 2px solid var(--grey-black, #121212);
border-radius: 48px;
}
.truth_content-end .truth_info img{
margin-right: -34px;
}
.truth_content-end .truth_block .truth_link{
width: 221px;
}
.truth_content-end .truth_xn{
position: relative;
width: 270px;
height: 158px;
background-image: url(../img/xn-border.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.truth_points {
font-size: 450%;
font-weight: 700;
}
.truth_content-wrap {
z-index: 5;
min-width: 800px;
}
.truth_pictures_brain {
display: block;
position: absolute;
top: -25%;
right: -3%;
z-index: 11;
}
.truth_pictures_sale {
display: block;
position: absolute;
bottom: 5%;
z-index: 0;
left: 10%;
}
.truth_pictures_arrow {
display: block;
position: absolute;
top: 5%;
left: 28%;
}
.main-truth_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.main-truth_title span {
font-weight: 700;
font-size: 48px;
text-transform: uppercase;
color: #121212;
}