@@ -2587,263 +2778,140 @@
}
}
- /* Card */
- .sb-card {
- display: none;
+ /* Glassmorphism Testimonial Cards */
+ .testimonial-swiper {
+ padding: 40px 10px 80px !important;
+ overflow: hidden !important;
+ min-height: 450px;
+ /* Prevent layout shift */
}
- .sb-card.active {
- display: block;
- animation: sbSlideIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
+ .testimonial-swiper .swiper-wrapper {
+ transition-timing-function: linear !important;
}
- @keyframes sbSlideIn {
- from {
- opacity: 0;
- transform: translateY(24px) scale(0.97);
- }
-
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
+ .testimonial-swiper {
+ padding: 20px 10px 50px !important;
}
- /* Speech bubble */
- .sb-bubble {
- background: #ffffff;
- border-radius: 24px;
- padding: 0 0 32px 0;
+ .testimonial-card {
+ background: rgba(255, 255, 255, 0.45);
+ backdrop-filter: blur(14px);
+ -webkit-backdrop-filter: blur(14px);
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ border-radius: 28px;
+ padding: 35px;
+ box-shadow: 0 20px 50px rgba(109, 22, 223, 0.08);
+ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ height: calc(100% - 15px);
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
position: relative;
- box-shadow: 0 20px 60px rgba(109, 22, 223, 0.12), 0 4px 20px rgba(0, 0, 0, 0.06);
- overflow: visible;
- transition: transform 0.4s ease, box-shadow 0.4s ease;
- border: 1px solid rgba(109, 22, 223, 0.08);
+ animation: cardFloat 6s ease-in-out infinite;
}
- .sb-bubble:hover {
- transform: translateY(-6px);
- box-shadow: 0 30px 70px rgba(109, 22, 223, 0.18), 0 6px 30px rgba(0, 0, 0, 0.08);
- }
+ @keyframes cardFloat {
- /* Tail */
- .sb-bubble::after {
- content: '';
- position: absolute;
- bottom: -22px;
- left: 62px;
- width: 0;
- height: 0;
- border-left: 13px solid transparent;
- border-right: 24px solid transparent;
- border-top: 22px solid #ffffff;
- filter: drop-shadow(0 5px 3px rgba(109, 22, 223, 0.08));
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-12px);
+ }
}
- /* Header */
- .sb-header {
- background: linear-gradient(135deg, #6d16df 0%, #9b4dea 60%, #0dbbc9 100%);
- border-radius: 24px 24px 0 0;
- padding: 22px 28px;
- display: flex;
- align-items: center;
- gap: 16px;
- position: relative;
- overflow: hidden;
+ /* Stagger floating for adjacent cards */
+ .swiper-slide:nth-child(even) .testimonial-card {
+ animation-delay: -3s;
}
- .sb-header::before {
- content: '';
- position: absolute;
- top: -40%;
- right: -20%;
- width: 180px;
- height: 180px;
- background: rgba(255, 255, 255, 0.08);
- border-radius: 50%;
- pointer-events: none;
+ .testimonial-card:hover {
+ transform: translateY(-8px) scale(1.02);
+ box-shadow: 0 30px 60px rgba(13, 187, 201, 0.2);
+ background: rgba(255, 255, 255, 0.7);
+ border-color: rgba(109, 22, 223, 0.2);
}
- .sb-header::after {
- content: '';
- position: absolute;
- bottom: -50%;
- left: -10%;
- width: 130px;
- height: 130px;
- background: rgba(255, 255, 255, 0.05);
- border-radius: 50%;
- pointer-events: none;
+ .tm-header {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ margin-bottom: 20px;
}
- .sb-avatar {
- width: 64px;
- height: 64px;
+ .tm-avatar {
+ width: 70px;
+ height: 70px;
border-radius: 50%;
- background: rgba(255, 255, 255, 0.22);
- border: 3px solid rgba(255, 255, 255, 0.5);
+ object-fit: cover;
+ border: 3px solid #fff;
+ box-shadow: 0 10px 20px rgba(109, 22, 223, 0.15);
+ background: linear-gradient(135deg, #6d16df, #0dbbc9);
display: flex;
align-items: center;
justify-content: center;
- font-size: 1.5rem;
- font-weight: 900;
color: white;
- flex-shrink: 0;
- text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
- position: relative;
- z-index: 1;
- }
-
- .sb-name {
+ font-size: 1.5rem;
font-weight: 800;
- font-size: 1.15rem;
- color: white;
- margin: 0;
- line-height: 1.2;
- position: relative;
- z-index: 1;
}
- .sb-role {
- font-size: 0.82rem;
- color: rgba(255, 255, 255, 0.75);
- margin: 4px 0 0;
- font-weight: 500;
- position: relative;
- z-index: 1;
- }
-
- /* Quote icon top-right */
- .sb-quote-icon {
- margin-left: auto;
- position: relative;
- z-index: 1;
- }
-
- .sb-quote-icon svg {
- width: 38px;
- height: 38px;
- fill: rgba(255, 255, 255, 0.25);
- }
-
- /* Body */
- .sb-body {
- padding: 28px 30px 0;
- position: relative;
- }
-
- .sb-body::before {
- content: 'ÔÇ£';
- position: absolute;
- top: 14px;
- left: 22px;
- font-size: 5rem;
- line-height: 1;
- color: rgba(109, 22, 223, 0.08);
- font-family: Georgia, serif;
- font-weight: 900;
- pointer-events: none;
+ .tm-info h4 {
+ margin: 0;
+ font-size: 1.15rem;
+ font-weight: 800;
+ color: #322e2f;
}
- .sb-text {
- color: #4a4a5a;
- font-size: 0.97rem;
- line-height: 1.9;
- font-style: italic;
- margin-bottom: 20px;
- position: relative;
- z-index: 1;
+ .tm-info p {
+ margin: 3px 0 0;
+ font-size: 0.85rem;
+ color: #6d16df;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
- .sb-stars {
+ .tm-stars {
color: #f5c518;
- font-size: 1.2rem;
- letter-spacing: 3px;
- text-shadow: 0 2px 8px rgba(245, 197, 24, 0.3);
- }
-
- /* Rating badge beside stars */
- .sb-rating-badge {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- background: linear-gradient(135deg, rgba(109, 22, 223, 0.07), rgba(13, 187, 201, 0.07));
- border: 1px solid rgba(109, 22, 223, 0.12);
- border-radius: 50px;
- padding: 5px 14px;
- margin-top: 10px;
- font-size: 0.8rem;
- color: #6d16df;
- font-weight: 700;
+ font-size: 1rem;
+ letter-spacing: 2px;
}
- /* Arrow buttons */
- .sb-arrow {
- width: 52px;
- height: 52px;
- border-radius: 50%;
- border: 2px solid rgba(109, 22, 223, 0.2);
- background: white;
- color: #6d16df;
- font-size: 1.3rem;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
- flex-shrink: 0;
- box-shadow: 0 6px 20px rgba(109, 22, 223, 0.1);
- position: relative;
- overflow: hidden;
+ .tm-text {
+ font-size: 1.05rem;
+ line-height: 1.8;
+ color: #555;
+ font-style: italic;
+ margin: 0;
}
- .sb-arrow::before {
- content: '';
+ .tm-quote {
position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- background: rgba(109, 22, 223, 0.08);
- border-radius: 50%;
- transform: translate(-50%, -50%);
- transition: width 0.4s, height 0.4s;
- }
-
- .sb-arrow:hover::before {
- width: 200px;
- height: 200px;
- }
-
- .sb-arrow:hover {
- background: linear-gradient(135deg, #6d16df, #0dbbc9);
- border-color: transparent;
- color: white;
- transform: scale(1.12);
- box-shadow: 0 10px 30px rgba(109, 22, 223, 0.35);
- }
-
- /* Dots */
- .sb-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: rgba(109, 22, 223, 0.15);
- cursor: pointer;
- transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
+ top: 25px;
+ right: 30px;
+ font-size: 3rem;
+ color: rgba(109, 22, 223, 0.06);
+ font-family: serif;
+ line-height: 1;
}
- .sb-dot.active {
- background: linear-gradient(135deg, #6d16df, #0dbbc9);
- width: 30px;
+ /* Pagination Dots Styling */
+ .swiper-pagination-bullet {
+ width: 12px;
+ height: 6px;
border-radius: 4px;
- box-shadow: 0 0 12px rgba(109, 22, 223, 0.4);
+ background: rgba(109, 22, 223, 0.2);
+ opacity: 1;
+ transition: all 0.3s ease;
}
- .sb-dot:hover {
- background: rgba(109, 22, 223, 0.4);
- transform: scale(1.3);
+ .swiper-pagination-bullet-active {
+ background: linear-gradient(90deg, #6d16df, #0dbbc9);
+ width: 32px;
+ box-shadow: 0 4px 12px rgba(109, 22, 223, 0.3);
}
@@ -2878,273 +2946,278 @@
-