.tt-flux-tt-gallery {
--tt-gallery-ratio: 1;
--tt-gallery-image-duration: 300ms;
--tt-gallery-filter-duration: 250ms;
--tt-gallery-overlay-duration: 300ms;
--tt-gallery-pointer-width: 2px;
min-width: 0;
}
.tt-flux-tt-gallery *, .tt-flux-tt-gallery *::before { box-sizing: border-box; }
.tt-flux-tt-gallery [hidden] { display: none !important; } .tt-flux-tt-gallery .tt-gallery__filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: safe center;
gap: 20px;
margin-bottom: 24px;
padding: 4px;
overflow-x: auto;
}
.tt-flux-tt-gallery .tt-gallery__filter {
position: relative;
isolation: isolate;
flex: 0 0 auto;
appearance: none;
cursor: pointer;
margin: 0;
padding: 10px 14px;
border: 0 solid transparent;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #555;
font: inherit;
line-height: 1.4;
text-transform: none;
white-space: nowrap;
transition: color var(--tt-gallery-filter-duration), background-color var(--tt-gallery-filter-duration), border-color var(--tt-gallery-filter-duration);
}
.tt-flux-tt-gallery .tt-gallery__filter:is(:hover, :focus-visible),
.tt-flux-tt-gallery .tt-gallery__filter[aria-pressed="true"] { color: #111; }
.tt-flux-tt-gallery .tt-gallery__filter::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
background: var(--tt-gallery-pointer-color, currentColor);
opacity: 0;
pointer-events: none;
transition: opacity var(--tt-gallery-filter-duration), transform var(--tt-gallery-filter-duration);
}
.tt-gallery--pointer-underline .tt-gallery__filter::before { top: auto; height: var(--tt-gallery-pointer-width); }
.tt-gallery--pointer-background .tt-gallery__filter { --tt-gallery-pointer-color: #eee; }
.tt-gallery--pointer-none .tt-gallery__filter::before { display: none; }
.tt-gallery--animation-slide .tt-gallery__filter::before { transform: scaleX(0); transform-origin: left; }
.tt-flux-tt-gallery .tt-gallery__filter:is(:hover, :focus-visible, [aria-pressed="true"])::before { opacity: 1; transform: scaleX(1); }
.tt-gallery--animation-none .tt-gallery__filter::before { transition: none; }
.tt-flux-tt-gallery :is(.tt-gallery__filter, .tt-gallery__link, .tt-gallery__item):focus-visible { outline: 2px solid currentColor; outline-offset: -3px; } .tt-flux-tt-gallery .tt-gallery__items {
--tt-gallery-columns: 3;
--tt-gallery-gap: 10px;
position: relative;
display: grid;
grid-template-columns: repeat(var(--tt-gallery-columns), minmax(0, 1fr));
gap: var(--tt-gallery-gap);
align-items: start;
}
.tt-flux-tt-gallery .tt-gallery__item {
position: relative;
min-width: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: 0 solid transparent;
transition: border-color var(--tt-gallery-image-duration), box-shadow var(--tt-gallery-image-duration);
}
.tt-flux-tt-gallery .tt-gallery__link { display: block; color: inherit; text-decoration: none; }
.tt-flux-tt-gallery .tt-gallery__image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
border-radius: 0;
object-fit: cover;
transition: opacity var(--tt-gallery-image-duration), filter var(--tt-gallery-image-duration), transform var(--tt-gallery-image-duration);
}
.tt-gallery--grid .tt-gallery__image { aspect-ratio: var(--tt-gallery-ratio); }
.tt-gallery--masonry .tt-gallery__image { aspect-ratio: auto; }
.tt-flux-tt-gallery .tt-gallery__items--positioned { display: block; }
.tt-gallery__items--positioned > .tt-gallery__item { position: absolute; top: 0; left: 0; }
.tt-flux-tt-gallery .tt-gallery__sizer {
position: absolute;
visibility: hidden;
pointer-events: none;
width: calc((100% + var(--tt-gallery-gap)) / var(--tt-gallery-columns) - var(--tt-gallery-gap));
height: var(--tt-gallery-gap);
} .tt-flux-tt-gallery .tt-gallery__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 24px;
color: #fff;
pointer-events: none;
opacity: 0;
transition: opacity var(--tt-gallery-overlay-duration);
}
.tt-gallery__overlay::before {
content: "";
position: absolute;
inset: 0;
display: none;
background: #000;
opacity: 0.45;
transition: opacity var(--tt-gallery-overlay-duration), background var(--tt-gallery-overlay-duration);
}
.tt-gallery__overlay--background::before { display: block; }
.tt-flux-tt-gallery .tt-gallery__title, .tt-flux-tt-gallery .tt-gallery__description {
position: relative;
display: block;
overflow-wrap: anywhere;
white-space: pre-line;
color: inherit;
transition: color var(--tt-gallery-overlay-duration);
}
.tt-flux-tt-gallery .tt-gallery__title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.tt-flux-tt-gallery .tt-gallery__description { font-size: 14px; margin: 0; }
.tt-gallery--overlay-always .tt-gallery__overlay,
.tt-flux-tt-gallery .tt-gallery__item:is(:hover, :focus-within) .tt-gallery__overlay { opacity: 1; } .tt-flux-tt-gallery .tt-gallery__footer { display: flex; justify-content: center; margin-top: 24px; }
.tt-flux-tt-gallery .tt-gallery__load-more {
appearance: none;
cursor: pointer;
margin: 0;
padding: 12px 28px;
border: 0 solid transparent;
border-radius: 4px;
background: #111;
box-shadow: none;
color: #fff;
font: inherit;
line-height: 1.4;
text-transform: none;
transition: color var(--tt-gallery-filter-duration), background-color var(--tt-gallery-filter-duration), border-color var(--tt-gallery-filter-duration);
}
.tt-flux-tt-gallery .tt-gallery__load-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tt-flux-tt-gallery .tt-gallery__empty { padding: 20px; text-align: center; }
.tt-flux-tt-gallery .tt-gallery__status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1024px) { .tt-flux-tt-gallery .tt-gallery__items { --tt-gallery-columns: 2; } }
@media (max-width: 767px) { .tt-flux-tt-gallery .tt-gallery__items { --tt-gallery-columns: 1; } }
@media (max-width: 480px) { .tt-flux-tt-gallery .tt-gallery__filters { gap: 8px; } }
@media (hover: none) { .tt-gallery--overlay-hover .tt-gallery__overlay { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.tt-flux-tt-gallery { --tt-gallery-image-duration: 0ms !important; --tt-gallery-filter-duration: 0ms !important; --tt-gallery-overlay-duration: 0ms !important; }
}.tt-testimonial-slider {
position: relative;
}
.tt-testimonial-slider .tt-testimonial-slider__container {
overflow: hidden;
padding: 10px;
}
.tt-testimonial-slider__wrapper {
align-items: flex-start;
} .tt-testimonial-slider__slide {
display: flex;
flex-direction: column;
height: auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
transition: all 0.3s ease;
} .tt-testimonial-slider--equal-height .tt-testimonial-slider__wrapper {
align-items: stretch;
}
.tt-testimonial-slider--equal-height .tt-testimonial-slider__slide {
height: auto;
}
.tt-testimonial-slider--equal-height:not(.tt-testimonial-slider--layout-left) .tt-testimonial-slider__card {
flex: 1;
display: flex;
flex-direction: column;
}
.tt-testimonial-slider--equal-height.tt-testimonial-slider--layout-left .tt-testimonial-slider__card {
height: 100%;
display: flex;
flex-direction: column;
} .tt-testimonial-slider--layout-left .tt-testimonial-slider__slide {
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.tt-testimonial-slider--layout-center .tt-testimonial-slider__slide {
text-align: center;
align-items: center;
}
.tt-testimonial-slider--layout-left.tt-testimonial-slider--layout-center .tt-testimonial-slider__slide {
text-align: left;
} .tt-testimonial-slider__avatar-wrapper {
flex-shrink: 0;
margin-bottom: 15px;
}
.tt-testimonial-slider--layout-left .tt-testimonial-slider__avatar-wrapper {
margin-bottom: 0;
}
.tt-testimonial-slider__avatar {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
}
.tt-testimonial-slider--avatar-circle .tt-testimonial-slider__avatar {
border-radius: 50%;
}
.tt-testimonial-slider--avatar-rounded .tt-testimonial-slider__avatar {
border-radius: 12px;
}
.tt-testimonial-slider--avatar-square .tt-testimonial-slider__avatar {
border-radius: 0;
} .tt-testimonial-slider__quote-icon {
margin-bottom: 15px;
color: #e0e0e0;
line-height: 1;
}
.tt-testimonial-slider__quote-icon svg {
width: 30px;
height: 30px;
fill: currentColor;
}
.tt-testimonial-slider--layout-center .tt-testimonial-slider__quote-icon {
margin-left: auto;
margin-right: auto;
} .tt-testimonial-slider__rating {
display: flex;
gap: 4px;
margin-bottom: 15px;
}
.tt-testimonial-slider--layout-center .tt-testimonial-slider__rating {
justify-content: center;
}
.tt-testimonial-slider__star {
color: #ddd;
line-height: 1;
}
.tt-testimonial-slider__star svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.tt-testimonial-slider__star--active {
color: #ffc107;
} .tt-testimonial-slider__content {
font-size: 16px;
line-height: 1.6;
color: #555;
margin-bottom: 20px;
flex-grow: 1;
}
.tt-testimonial-slider__content p {
margin: 0 0 10px;
}
.tt-testimonial-slider__content p:last-child {
margin-bottom: 0;
} .tt-testimonial-slider__author {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
} .tt-testimonial-slider__position {
font-size: 14px;
color: #888;
} .tt-testimonial-slider__company-logo {
margin-top: 15px;
}
.tt-testimonial-slider__company-logo img {
max-height: 30px;
width: auto;
opacity: 0.7;
} .tt-testimonial-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.tt-testimonial-slider__arrow:hover {
background-color: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transform: translateY(-50%) scale(1.05);
}
.tt-testimonial-slider__arrow--prev {
left: -22px;
}
.tt-testimonial-slider__arrow--next {
right: -22px;
}
.tt-testimonial-slider__arrow svg {
width: 20px;
height: 20px;
fill: #333;
} .tt-testimonial-slider__arrow.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
} .tt-testimonial-slider__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.tt-testimonial-slider__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.tt-testimonial-slider__dot:hover,
.tt-testimonial-slider__dot.active {
background-color: #333;
transform: scale(1.2);
} @media (max-width: 1024px) {
.tt-testimonial-slider__arrow--prev {
left: 10px;
}
.tt-testimonial-slider__arrow--next {
right: 10px;
}
}
@media (max-width: 768px) {
.tt-testimonial-slider__slide {
padding: 20px;
}
.tt-testimonial-slider--layout-left .tt-testimonial-slider__slide {
flex-direction: column;
gap: 0;
}
.tt-testimonial-slider--layout-left .tt-testimonial-slider__avatar-wrapper {
margin-bottom: 15px;
}
.tt-testimonial-slider__avatar {
width: 50px;
height: 50px;
}
.tt-testimonial-slider__content {
font-size: 14px;
}
.tt-testimonial-slider__author {
font-size: 16px;
}
.tt-testimonial-slider__arrow {
width: 36px;
height: 36px;
}
.tt-testimonial-slider__arrow svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 480px) {
.tt-testimonial-slider__slide {
padding: 15px;
}
.tt-testimonial-slider__content {
font-size: 13px;
}
.tt-testimonial-slider__author {
font-size: 14px;
}
.tt-testimonial-slider__position {
font-size: 12px;
}
}