[data-aos="fade-up"] {
opacity: 0;
transform: translateY(30px);
transition-property: transform, opacity;
}
[data-aos="fade-up"].aos-animate {
opacity: 1;
transform: translateY(0);
}
[data-aos="slide-right"] {
opacity: 0;
transform: translateX(-50px);
transition-property: transform, opacity;
}
[data-aos="slide-right"].aos-animate {
opacity: 1;
transform: translateX(0);
}
[data-aos="slide-left"] {
opacity: 0;
transform: translateX(50px);
transition-property: transform, opacity;
}
[data-aos="slide-left"].aos-animate {
opacity: 1;
transform: translateX(0);
}
[data-aos="zoom-in"] {
opacity: 0;
transform: scale(0.8);
transition-property: transform, opacity;
}
[data-aos="zoom-in"].aos-animate {
opacity: 1;
transform: scale(1);
}
[data-aos="fade"] {
opacity: 0;
transition-property: opacity;
}
[data-aos="fade"].aos-animate {
opacity: 1;
}
[data-aos-delay="100"] {
transition-delay: 0.1s;
}
[data-aos-delay="200"] {
transition-delay: 0.2s;
}
[data-aos-delay="300"] {
transition-delay: 0.3s;
}
[data-aos-delay="400"] {
transition-delay: 0.4s;
}
[data-aos-delay="500"] {
transition-delay: 0.5s;
}
[data-aos-delay="600"] {
transition-delay: 0.6s;
}
[data-aos-delay="700"] {
transition-delay: 0.7s;
}
[data-aos-delay="800"] {
transition-delay: 0.8s;
}
[data-aos-delay="900"] {
transition-delay: 0.9s;
}
[data-aos-delay="1000"] {
transition-delay: 1s;
}
[data-aos-delay="1100"] {
transition-delay: 1.1s;
}
[data-aos-delay="1200"] {
transition-delay: 1.2s;
}
[data-aos][data-aos-duration="400"] {
transition-duration: 0.4s;
}
[data-aos][data-aos-duration="600"] {
transition-duration: 0.6s;
}
[data-aos][data-aos-duration="800"] {
transition-duration: 0.8s;
}
[data-aos][data-aos-duration="1000"] {
transition-duration: 1s;
}
.card {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
.card-image {
overflow: hidden;
border-radius: 10px;
}
.card-image img {
transition: transform 0.6s ease;
will-change: transform;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.card-button {
transition: all 0.3s ease;
}
.card-button:hover {
background: #76A135;
border-color: #76A135;
}
.card-button:hover .card-button__title {
color: white;
}
.card-button:hover .card-button__image svg {
fill: white;
}
.card-button:active {
transform: scale(0.95);
}
.card-prorogue__image {
transition: transform 0.3s ease;
}
.card-prorogue__image:hover {
transform: scale(1.2);
}
.card-prorogue__image.active {
animation: heartbeat 0.6s ease;
}
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
25% {
transform: scale(1.3);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.3);
}
}
.card-svg,
.card-prorogue,
.card__preview {
transition: all 0.3s ease;
}
.card__preview {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.card__preview:hover {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card:hover .card__preview {
opacity: 1;
transform: translateY(0);
}
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
.skeleton-card {
width: 100%;
height: 270px;
margin-bottom: 15px;
border-radius: 10px;
}
.skeleton-title {
width: 80%;
height: 20px;
margin-bottom: 10px;
}
.skeleton-price {
width: 40%;
height: 24px;
}
.skeleton-button {
width: 106px;
height: 30px;
border-radius: 4px;
}
.skeleton-text {
width: 100%;
height: 14px;
margin-bottom: 8px;
}
.skeleton-text--short {
width: 60%;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton-container {
display: flex;
flex-direction: column;
padding: 15px;
}
.skeleton-product-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
background: white;
border-radius: 10px;
}
.skeleton-product-card .skeleton-image {
width: 100%;
height: 270px;
margin-bottom: 15px;
border-radius: 10px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.skeleton-product-card .skeleton-info {
flex: 1;
}
.skeleton-product-card .skeleton-info .skeleton-title {
width: 85%;
height: 20px;
margin-bottom: 15px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.skeleton-product-card .skeleton-info .skeleton-price {
width: 45%;
height: 24px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes pulse-loading {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.skeleton-pulse {
animation: pulse-loading 1.5s ease-in-out infinite;
}
.skeleton-banner {
width: 100%;
height: 400px;
border-radius: 10px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@media (max-width: 768px) {
.skeleton-banner {
height: 250px;
}
}
.is-loading {
pointer-events: none;
position: relative;
}
.is-loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
}
#particles-flowers {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
opacity: 0.3;
overflow: hidden;
}
.main {
position: relative;
z-index: 1;
}
#particles-flowers canvas {
display: block;
vertical-align: bottom;
}
/*.page {
position: relative;
}*/
@media (max-width: 768px) {
#particles-flowers {
opacity: 0.2;
}
}
.particles-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
pointer-events: none;
z-index: 0;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-20px) rotate(5deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
75% {
transform: translateY(-10px) rotate(-5deg);
}
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
.section-with-particles {
position: relative;
}
.section-with-particles #particles-flowers {
position: absolute;
}
/* =================================================
🔥 СУПЕР ЯРКИЕ ВИЗУАЛЬНЫЕ ЭФФЕКТЫ 🔥
================================================= */
@keyframes glow-pulse {
0%,
100% {
box-shadow: 0 0 5px rgba(118, 161, 53, 0.3);
}
50% {
box-shadow: 0 0 25px rgba(118, 161, 53, 0.8),
0 0 40px rgba(118, 161, 53, 0.5),
0 0 60px rgba(118, 161, 53, 0.3);
}
}
.card-button {
animation: glow-pulse 2.5s ease-in-out infinite !important;
box-shadow: 0 4px 15px rgba(118, 161, 53, 0.3) !important;
}
@keyframes rainbow-border {
0% {
box-shadow: 0 20px 60px rgba(118, 161, 53, 0.5);
}
25% {
box-shadow: 0 20px 60px rgba(96, 41, 116, 0.5);
}
50% {
box-shadow: 0 20px 60px rgba(118, 161, 53, 0.7);
}
75% {
box-shadow: 0 20px 60px rgba(255, 107, 107, 0.5);
}
100% {
box-shadow: 0 20px 60px rgba(118, 161, 53, 0.5);
}
}
.card:hover {
transform: translateY(-15px) scale(1.03) !important;
animation: rainbow-border 3s ease-in-out infinite !important;
}
.home-products__item:nth-child(1) .card-image::before,
.home-products__item:nth-child(2) .card-image::before,
.home-products__item:nth-child(3) .card-image::before {
content: '🔥 ХИТ';
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
color: white;
padding: 8px 18px;
border-radius: 25px;
font-weight: bold;
font-size: 13px;
z-index: 10;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.7);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes shine {
0% {
left: -100%;
}
20%,
100% {
left: 100%;
}
}
.card-image::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent);
animation: shine 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes price-pulse {
0%,
100% {
transform: scale(1);
color: #333333;
}
50% {
transform: scale(1.1);
color: #76A135;
font-weight: bold;
}
}
.card:hover .card-name--span {
animation: price-pulse 1s ease-in-out 3 !important;
}
.home-title {
background: linear-gradient(135deg, #333 0%, #76A135 50%, #602974 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
background-size: 200% auto !important;
animation: gradient-shift 3s ease infinite !important;
font-weight: bold !important;
text-shadow: 0 2px 10px rgba(118, 161, 53, 0.3) !important;
}
@keyframes gradient-shift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.home-banners__item {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.home-banners__item:hover {
transform: scale(1.08) translateY(-10px) rotate(1deg) !important;
box-shadow: 0 25px 60px rgba(118, 161, 53, 0.5) !important;
filter: brightness(1.15) saturate(1.2) !important;
}
@keyframes float-in {
0% {
opacity: 0;
transform: translateY(100px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.home-products__item {
animation: float-in 0.8s ease-out backwards;
}
.home-products__item:nth-child(1) {
animation-delay: 0.1s;
}
.home-products__item:nth-child(2) {
animation-delay: 0.2s;
}
.home-products__item:nth-child(3) {
animation-delay: 0.3s;
}
.home-products__item:nth-child(4) {
animation-delay: 0.4s;
}
.home-products__item:nth-child(5) {
animation-delay: 0.5s;
}
.home-products__item:nth-child(6) {
animation-delay: 0.6s;
}
.home-products:hover {
background: radial-gradient(ellipse at center, rgba(118, 161, 53, 0.08) 0%, transparent 70%) !important;
}
@keyframes confetti-fall {
0% {
transform: translateY(-10px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(20px) rotate(360deg);
opacity: 0;
}
}
.card:hover::before {
content: '✨';
position: absolute;
top: -10px;
right: 20%;
font-size: 24px;
animation: confetti-fall 1.5s ease-out;
pointer-events: none;
z-index: 100;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
.card-button:active::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
animation: ripple 0.6s ease-out;
}
.card:hover .card-image img {
transform: scale(1.08) rotate(1deg) !important;
filter: contrast(1.05) saturate(1.1) !important;
}
.ripple-effect {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
pointer-events: none;
width: 30px;
height: 30px;
transform: translate(-50%, -50%) scale(0);
animation: ripple-animation 0.6s ease-out;
z-index: 1000;
}
@keyframes ripple-animation {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(10);
opacity: 0;
}
}
.card-button,
.button,
.card-order__basket {
position: relative;
overflow: hidden;
}
/* ═══════════════════════════════════════════════
SKELETON LOADERS - Красивые заглушки при загрузке
═══════════════════════════════════════════════ */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.card-skeleton {
background: #f6f7f8;
background-image: linear-gradient(90deg,
#f6f7f8 0px,
#edeef1 40px,
#f6f7f8 80px);
background-size: 1000px 100%;
animation: shimmer 2s infinite linear;
border-radius: 10px;
}
.skeleton-image {
width: 100%;
height: 300px;
border-radius: 10px;
margin-bottom: 15px;
}
.skeleton-title {
width: 80%;
height: 20px;
border-radius: 4px;
margin-bottom: 10px;
}
.skeleton-price {
width: 40%;
height: 24px;
border-radius: 4px;
}
.products-skeleton {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px 0;
}
@media (max-width: 968px) {
.products-skeleton {
grid-template-columns: repeat(2, 1fr);
}
}
/* ═══════════════════════════════════════════════
LOTTIE ANIMATIONS - Дополнительные стили
═══════════════════════════════════════════════ */
.lottie-icon {
width: 40px;
height: 40px;
display: inline-block;
}
.basket-icon-animated {
animation: basket-bounce 0.6s ease-in-out;
}
@keyframes basket-bounce {
0%,
100% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.1);
}
}
.favorite-icon-animated {
animation: favorite-pulse 0.8s ease-in-out;
}
@keyframes favorite-pulse {
0% {
transform: scale(1);
}
15% {
transform: scale(1.3);
}
30% {
transform: scale(0.9);
}
45% {
transform: scale(1.15);
}
60% {
transform: scale(0.95);
}
75% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.loading-spinner {
width: 50px;
height: 50px;
margin: 40px auto;
}