.env-carousel {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.env-carousel[data-env-carousel-ready="1"] {
cursor: grab;
}
.env-carousel.is-dragging {
cursor: grabbing;
}
.env-carousel.is-dragging .env-carousel-track {
transition: none;
}
.env-carousel.is-dragging,
.env-carousel.is-dragging * {
user-select: none;
-webkit-user-select: none;
}
.env-carousel-track {
display: flex;
transition: transform 0.4s ease;
gap: var(--env-carousel-gap, 0px);
will-change: transform;
}
.env-carousel-slide {
flex: 0 0
calc(
(100% - (var(--env-carousel-per-view, 1) - 1) * var(--env-carousel-gap, 0px)) /
var(--env-carousel-per-view, 1)
);
width: auto;
min-width: 0;
aspect-ratio: var(--env-carousel-ratio, 16 / 9);
height: auto;
display: block;
}
.env-carousel[data-ratio="4-3"] .env-carousel-slide {
aspect-ratio: 4 / 3;
}
.env-carousel[data-ratio="1-1"] .env-carousel-slide {
aspect-ratio: 1 / 1;
}
.env-carousel[data-ratio="3-4"] .env-carousel-slide {
aspect-ratio: 3 / 4;
}
.env-carousel[data-ratio="auto"] .env-carousel-slide {
aspect-ratio: auto;
}
.env-carousel-slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
img.env-carousel-slide {
object-fit: cover;
}
.env-carousel[data-arrows="0"] .env-carousel-prev,
.env-carousel[data-arrows="0"] .env-carousel-next,
.env-carousel[data-dots="0"] .env-carousel-dots {
display: none;
}
.env-carousel-prev,
.env-carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: var(--env-arrow-icon-size, 16px);
z-index: 2;
}
.env-carousel-prev {
left: 12px;
}
.env-carousel-next {
right: 12px;
}
.env-carousel-prev:hover,
.env-carousel-next:hover {
background: rgba(0, 0, 0, 0.65);
}
[data-arrow-icon] .env-carousel-prev,
[data-arrow-icon] .env-carousel-next {
font-size: 0;
}
[data-arrow-icon] .env-carousel-prev::before,
[data-arrow-icon] .env-carousel-next::before {
content: "";
width: var(--env-arrow-icon-size, 16px);
height: var(--env-arrow-icon-size, 16px);
background-color: currentColor;
-webkit-mask: var(--env-arrow-icon) center / contain no-repeat;
mask: var(--env-arrow-icon) center / contain no-repeat;
}
[data-arrow-icon] .env-carousel-prev::before {
transform: scaleX(-1);
}
[data-arrow-icon="chevron"] {
--env-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
}
[data-arrow-icon="arrow"] {
--env-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z'/%3E%3C/svg%3E");
}
[data-arrow-icon="triangle"] {
--env-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
[data-arrow-icon="double"] {
--env-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6zm6.59 0-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z'/%3E%3C/svg%3E");
}
.env-carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 2;
}
.env-carousel-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
.env-carousel-dot.is-active {
background: #fff;
}
.env-carousel-prev:focus-visible,
.env-carousel-next:focus-visible,
.env-carousel-dot:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.env-carousel-track {
transition: none;
}
}
.env-carousel-slide-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.env-carousel-slide-content .env-btn {
align-self: center;
}
[data-env-widget="post-carousel"] {
position: relative;
overflow: hidden;
--env-pc-dots-gap: 30px;
--env-pc-dots-size: 9px;
padding-bottom: calc(var(--env-pc-dots-gap) + var(--env-pc-dots-size));
}
[data-env-widget="post-carousel"] .env-carousel-dots {
bottom: 0;
}
[data-env-widget="post-carousel"][data-arrows="0"] .env-carousel-prev,
[data-env-widget="post-carousel"][data-arrows="0"] .env-carousel-next,
[data-env-widget="post-carousel"][data-dots="0"] .env-carousel-dots {
display: none;
}
[data-env-widget="post-carousel"] .env-carousel-prev,
[data-env-widget="post-carousel"] .env-carousel-next {
top: calc((100% - var(--env-pc-dots-gap) - var(--env-pc-dots-size)) / 2);
}
[data-env-widget="post-carousel"] .env-carousel-dot {
box-sizing: border-box;
width: var(--env-pc-dots-size);
height: var(--env-pc-dots-size);
background: transparent;
border: 1px solid var(--env-primary, #0fa697);
}
[data-env-widget="post-carousel"] .env-carousel-dot.is-active {
background: var(--env-primary, #0fa697);
}
.env-post-card.env-carousel-slide {
aspect-ratio: auto;
height: auto;
align-items: stretch;
}
.env-post-card {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 14px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(17, 24, 39, 0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.env-post-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -28px rgba(17, 24, 39, 0.5);
}
.env-post-card-link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
color: inherit;
text-decoration: none;
}
.env-post-card-link:hover {
color: inherit;
}
.env-post-card-media {
display: block;
margin-bottom: 14px;
}
.env-post-card-image {
display: block;
width: var(--env-pc-image-w, 100%);
aspect-ratio: var(--env-pc-image-ratio, 1 / 1);
height: var(--env-pc-image-h, auto);
border-radius: var(--env-wc-radius-sm, 10px);
object-fit: var(--env-pc-image-fit, cover);
object-position: var(--env-pc-image-pos, center center);
}
.env-post-card-image--empty {
background:
linear-gradient(135deg, rgba(17, 24, 39, 0.06), rgba(17, 24, 39, 0.12));
}
.env-post-card-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
}
.env-post-card-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.35;
}
.env-post-card-excerpt {
font-size: 0.9rem;
line-height: 1.6;
color: #6b7280;
}
.env-post-card-more {
margin-top: 4px;
font-size: 0.85rem;
font-weight: 600;
color: #111827;
}
.env-carousel-slide.env-carousel-zoomable {
cursor: zoom-in;
}
.env-carousel-slide.env-carousel-zoomable:focus-visible {
outline: 2px solid var(--env-primary, #0fa697);
outline-offset: 2px;
}
.env-post-card-price {
margin-top: 2px;
color: var(--env-wc-accent, #0fa697);
font-weight: 700;
font-size: 0.98rem;
}
.env-post-card-price del {
margin-right: 6px;
color: rgba(17, 24, 39, 0.5);
font-weight: 500;
text-decoration: line-through;
}
.env-post-card-price ins {
background: none;
text-decoration: none;
}
.env-post-card-media {
position: relative;
}
.env-post-card-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
padding: 3px 9px;
border-radius: 999px;
background: var(--env-wc-accent, #0fa697);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.env-post-card-actions {
display: block;
padding: 12px 0 0;
}
.env-post-card-actions .button {
display: inline-block;
width: 100%;
padding: 9px 14px;
border: 0;
border-radius: 999px;
background: var(--env-wc-accent, #0fa697);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.env-post-card-actions .button:hover {
filter: brightness(1.06);
}
.env-post-card-title {
font-family: var(--env-card-title-family, inherit);
font-size: var(--env-card-title-size, 1.05rem);
font-weight: var(--env-card-title-weight, 600);
line-height: var(--env-card-title-lh, 1.35);
letter-spacing: var(--env-card-title-ls, inherit);
text-transform: var(--env-card-title-tt, inherit);
color: var(--env-card-title-color, inherit);
}
.env-post-card:hover .env-post-card-title {
font-family: var(--env-card-title-family-hover, var(--env-card-title-family, inherit));
font-size: var(--env-card-title-size-hover, var(--env-card-title-size, 1.05rem));
font-weight: var(--env-card-title-weight-hover, var(--env-card-title-weight, 600));
line-height: var(--env-card-title-lh-hover, var(--env-card-title-lh, 1.35));
letter-spacing: var(--env-card-title-ls-hover, var(--env-card-title-ls, inherit));
text-transform: var(--env-card-title-tt-hover, var(--env-card-title-tt, inherit));
color: var(--env-card-title-color-hover, var(--env-card-title-color, inherit));
}
.env-post-card-excerpt {
font-family: var(--env-card-text-family, inherit);
font-size: var(--env-card-text-size, 0.9rem);
font-weight: var(--env-card-text-weight, inherit);
line-height: var(--env-card-text-lh, 1.6);
letter-spacing: var(--env-card-text-ls, inherit);
text-transform: var(--env-card-text-tt, inherit);
color: var(--env-card-text-color, #6b7280);
}
.env-post-card:hover .env-post-card-excerpt {
font-family: var(--env-card-text-family-hover, var(--env-card-text-family, inherit));
font-size: var(--env-card-text-size-hover, var(--env-card-text-size, 0.9rem));
font-weight: var(--env-card-text-weight-hover, var(--env-card-text-weight, inherit));
line-height: var(--env-card-text-lh-hover, var(--env-card-text-lh, 1.6));
letter-spacing: var(--env-card-text-ls-hover, var(--env-card-text-ls, inherit));
text-transform: var(--env-card-text-tt-hover, var(--env-card-text-tt, inherit));
color: var(--env-card-text-color-hover, var(--env-card-text-color, #6b7280));
}
.env-post-card-more {
font-family: var(--env-card-button-family, inherit);
font-size: var(--env-card-button-size, 0.85rem);
font-weight: var(--env-card-button-weight, 600);
line-height: var(--env-card-button-lh, inherit);
letter-spacing: var(--env-card-button-ls, inherit);
text-transform: var(--env-card-button-tt, inherit);
color: var(--env-card-button-color, #111827);
}
.env-post-card:hover .env-post-card-more {
font-family: var(--env-card-button-family-hover, var(--env-card-button-family, inherit));
font-size: var(--env-card-button-size-hover, var(--env-card-button-size, 0.85rem));
font-weight: var(--env-card-button-weight-hover, var(--env-card-button-weight, 600));
line-height: var(--env-card-button-lh-hover, var(--env-card-button-lh, inherit));
letter-spacing: var(--env-card-button-ls-hover, var(--env-card-button-ls, inherit));
text-transform: var(--env-card-button-tt-hover, var(--env-card-button-tt, inherit));
color: var(--env-card-button-color-hover, var(--env-card-button-color, #111827));
}
.env-post-card-actions .button {
font-family: var(--env-card-button-family, inherit);
font-size: var(--env-card-button-size, 0.9rem);
font-weight: var(--env-card-button-weight, 600);
line-height: var(--env-card-button-lh, inherit);
letter-spacing: var(--env-card-button-ls, inherit);
text-transform: var(--env-card-button-tt, inherit);
color: var(--env-card-button-color, #fff);
}
.env-post-card:hover .env-post-card-actions .button {
font-family: var(--env-card-button-family-hover, var(--env-card-button-family, inherit));
font-size: var(--env-card-button-size-hover, var(--env-card-button-size, 0.9rem));
font-weight: var(--env-card-button-weight-hover, var(--env-card-button-weight, 600));
line-height: var(--env-card-button-lh-hover, var(--env-card-button-lh, inherit));
letter-spacing: var(--env-card-button-ls-hover, var(--env-card-button-ls, inherit));
text-transform: var(--env-card-button-tt-hover, var(--env-card-button-tt, inherit));
color: var(--env-card-button-color-hover, var(--env-card-button-color, #fff));
}