.aiweb-home {
display: flex;
flex-direction: column;
padding-block-start: var(--space-4);
}
.aiweb-home-section {
margin-block-start: var(--aiweb-sec-top, var(--space-10));
margin-block-end: var(--aiweb-sec-bottom, 0);
}
.aiweb-home-section:first-child {
margin-block-start: var(--aiweb-sec-top, 0);
}
.aiweb-hscroll {
display: flex;
gap: var(--space-3);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-block: var(--space-2); 
scroll-padding-inline-start: var(--space-4);
}
.aiweb-hscroll::-webkit-scrollbar {
display: none;
}
.aiweb-hscroll > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
.aiweb-pcard-track {
align-items: stretch;
}
.aiweb-pcard-track__item {
flex: 0 0 calc((100% - var(--space-3)) / 1.7);
}
.aiweb-pcard-track__item > .aiweb-product-card {
block-size: 100%;
}
.aiweb-articles__track {
align-items: stretch;
}
.aiweb-articles__item {
flex: 0 0 80%;
}
.aiweb-articles__item > .aiweb-post-card {
block-size: 100%;
}
.aiweb-hero.aiweb-app {
padding-inline: 0;
}
.aiweb-hero__swiper {
--swiper-pagination-color: var(--text-on-primary);
--swiper-pagination-bullet-inactive-color: var(--text-on-primary);
--swiper-pagination-bullet-inactive-opacity: .45;
--swiper-pagination-bullet-size: var(--space-2);
overflow: hidden;
}
.aiweb-hero__slide {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--color-primary-dark);
}
.aiweb-hero__link {
display: block;
color: inherit;
}
.aiweb-hero__img {
inline-size: 100%;
block-size: auto;
}
.aiweb-hero__img--default {
aspect-ratio: 840 / 1000;
object-fit: cover;
}
.aiweb-hero__content {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-6);
direction: rtl;
}
.aiweb-hero__title {
margin: 0;
max-inline-size: 72%;
color: var(--text-on-primary);
font-size: var(--fs-h1);
line-height: var(--lh-h1);
font-weight: var(--fw-bold);
text-align: start;
}
.aiweb-hero__subtitle {
margin: 0;
max-inline-size: 80%;
color: var(--text-on-primary);
opacity: .85;
font-size: var(--fs-body);
}
.aiweb-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--space-10);
margin-block-start: var(--space-2);
padding-block: var(--space-2);
padding-inline: var(--space-6);
color: var(--text-primary);
background-color: var(--surface);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
border-radius: var(--radius-pill);
transition: background-color .15s ease;
}
.aiweb-hero__cta:hover,
.aiweb-hero__link:hover .aiweb-hero__cta { 
color: var(--text-primary);
background-color: var(--color-primary-soft);
}
.aiweb-categories .aiweb-section-header,
.aiweb-newest .aiweb-section-header,
.aiweb-articles .aiweb-section-header {
justify-content: flex-start;
gap: var(--space-2);
}
.aiweb-categories .aiweb-section-header__text,
.aiweb-newest .aiweb-section-header__text,
.aiweb-articles .aiweb-section-header__text {
display: contents;
}
.aiweb-categories .aiweb-section-header__title,
.aiweb-newest .aiweb-section-header__title,
.aiweb-articles .aiweb-section-header__title {
order: 1;
}
.aiweb-categories .aiweb-section-header__link,
.aiweb-newest .aiweb-section-header__link,
.aiweb-articles .aiweb-section-header__link {
order: 2;
margin-inline-start: auto;
}
.aiweb-categories .aiweb-section-header__icon,
.aiweb-newest .aiweb-section-header__icon,
.aiweb-articles .aiweb-section-header__icon {
order: 3;
inline-size: calc(var(--space-10) + var(--space-1));
block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-categories .aiweb-section-header__icon svg,
.aiweb-newest .aiweb-section-header__icon svg,
.aiweb-articles .aiweb-section-header__icon svg {
width: 20px;
height: 20px;
}
.aiweb-categories__panel {
padding-block: var(--space-3);
padding-inline: var(--space-4);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-categories__cards {
margin-inline: calc(-1 * var(--space-4));
padding-inline: var(--space-4);
}
.aiweb-categories__cards .aiweb-category-card {
flex: 0 0 40%;
}
.aiweb-herobanner__frame {
display: block;
overflow: hidden;
border-radius: var(--aiweb-herobanner-radius, var(--radius-lg));
}
.aiweb-herobanner--bleed .aiweb-herobanner__frame {
border-radius: var(--aiweb-herobanner-radius, 0);
}
.aiweb-herobanner__picture {
display: block;
}
.aiweb-herobanner__img {
display: block;
inline-size: 100%;
block-size: auto;
max-block-size: var(--aiweb-herobanner-maxh, none);
object-fit: cover;
object-position: center;
}
@media (hover: hover) {
a.aiweb-herobanner__frame {
transition: box-shadow var(--transition-base);
}
a.aiweb-herobanner__frame:hover {
box-shadow: var(--shadow-hover);
}
}
.aiweb-catarch__rail {
--aiweb-catarch-w: calc((100% - var(--space-3) * 2) / 2.6); 
align-items: center;
margin-inline: calc(-1 * var(--space-4));
padding-inline: var(--space-4);
}
.aiweb-catarch__card {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 0 0 var(--aiweb-catarch-w);
color: var(--text-primary);
text-align: center;
}
.aiweb-catarch__card:nth-child(even) {
flex-basis: calc(var(--aiweb-catarch-w) * .78);
}
.aiweb-catarch__frame {
display: grid;
aspect-ratio: 3 / 4;
padding: var(--space-2);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg);
overflow: hidden;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-catarch__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: var(--radius-pill) var(--radius-pill) var(--radius-md) var(--radius-md);
}
.aiweb-catarch__title {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
}
.aiweb-catshow__row {
--aiweb-catshow-gap: var(--space-3);
display: grid;
grid-template-columns: repeat(var(--aiweb-catshow-cols, 2), minmax(0, 1fr));
gap: var(--aiweb-catshow-gap);
align-items: stretch;
}
.aiweb-catshow__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3);
color: var(--text-primary);
text-align: center;
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-catshow__head,
.aiweb-catshow__all {
grid-column: 1 / -1;
}
.aiweb-catshow__head {
flex-direction: row;
gap: var(--space-3);
padding: var(--space-4);
}
.aiweb-catshow__headings {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-catshow__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
}
.aiweb-catshow__subtitle {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
color: var(--text-secondary);
}
.aiweb-catshow__gem {
position: relative;
flex: 0 0 auto;
inline-size: var(--space-6);
block-size: var(--space-6);
}
.aiweb-catshow__gem i {
position: absolute;
background-color: var(--aiweb-catshow-accent, var(--color-star));
rotate: 45deg;
}
.aiweb-catshow__gem-a {
inline-size: var(--space-3);
block-size: var(--space-3);
inset-block-start: 0;
inset-inline-end: 0;
}
.aiweb-catshow__gem-b {
inline-size: var(--space-2);
block-size: var(--space-2);
inset-block-end: 0;
inset-inline-end: var(--space-1);
}
.aiweb-catshow__gem-c {
inline-size: var(--space-1);
block-size: var(--space-1);
inset-block-start: var(--space-2);
inset-inline-start: 0;
}
.aiweb-catshow__frame {
display: block;
inline-size: 100%;
aspect-ratio: 1 / 1;
}
.aiweb-catshow__img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-catshow__name {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
}
.aiweb-catshow__all {
justify-self: center;
gap: var(--space-3);
padding-inline: var(--space-6);
}
.aiweb-catshow__all-label {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
}
.aiweb-catshow__all-icon {
display: inline-flex;
color: var(--text-primary);
}
.aiweb-catshow__row--backdrop {
padding: var(--space-4);
background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
border-radius: var(--radius-xl);
}
.aiweb-catshow__row--seps .aiweb-catshow__item:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-end: calc(-1 * (var(--aiweb-catshow-gap) + var(--space-2)) / 2);
inset-block-start: 50%;
translate: 0 -50%;
inline-size: var(--space-2);
block-size: var(--space-3);
background-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
@media (min-width: 768px) {
.aiweb-catshow__row {
--aiweb-catshow-gap: var(--space-4);
display: flex;
}
.aiweb-catshow__head {
flex: 0 0 auto;
min-inline-size: calc(var(--space-16) * 3);
padding-inline: var(--space-6);
}
.aiweb-catshow__card {
flex: 1 1 0;
min-inline-size: 0;
}
.aiweb-catshow__all {
flex: 0 0 auto;
min-inline-size: calc(var(--space-16) + var(--space-8));
}
}
@media (min-width: 1024px) {
.aiweb-catshow__head {
min-inline-size: calc(var(--space-16) * 4);
}
}
@media (hover: hover) {
.aiweb-catshow__card,
.aiweb-catshow__all {
transition: box-shadow var(--transition-base), color var(--transition-base);
}
.aiweb-catshow__card:hover,
.aiweb-catshow__all:hover {
color: var(--color-primary-fg);
box-shadow: var(--shadow-hover);
}
}
.aiweb-brands__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.aiweb-brands__headings {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-brands__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
}
.aiweb-brands__subtitle {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
color: var(--text-secondary);
}
.aiweb-brands__gem {
order: -1;
position: relative;
flex: 0 0 auto;
inline-size: var(--space-6);
block-size: var(--space-6);
}
.aiweb-brands__gem i {
position: absolute;
rotate: 45deg;
}
.aiweb-brands__gem-a {
inline-size: var(--space-3);
block-size: var(--space-3);
inset-block-end: 0;
inset-inline-start: 0;
background-color: var(--aiweb-brands-accent, var(--color-star));
}
.aiweb-brands__gem-b {
inline-size: var(--space-2);
block-size: var(--space-2);
inset-block-start: 0;
inset-inline-end: 0;
background-color: var(--color-primary);
}
.aiweb-brands__row {
--aiweb-brands-gap: var(--space-3);
--aiweb-brands-w: calc((100% - var(--aiweb-brands-gap) * 2) / 2.4);
gap: var(--aiweb-brands-gap);
}
.aiweb-brands__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-3);
color: var(--text-primary);
text-align: center;
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-brands__row .aiweb-brands__card {
flex: 0 0 var(--aiweb-brands-w);
}
.aiweb-brands__logo {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
aspect-ratio: 5 / 2;
}
.aiweb-brands__logo-img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-brands__logo-text {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
line-height: var(--lh-body-lg);
}
.aiweb-brands__stat {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
}
.aiweb-brands__stat-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--aiweb-brands-accent, var(--color-star));
}
.aiweb-brands__stat--alt {
font-weight: var(--fw-regular);
color: var(--text-secondary);
}
.aiweb-brands__cta {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
color: var(--color-primary-fg);
}
.aiweb-brands__cta-icon {
display: inline-flex;
}
.aiweb-brands__all {
gap: var(--space-3);
padding-inline: var(--space-5);
}
.aiweb-brands__all-label {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
}
.aiweb-brands__all-icon {
display: inline-flex;
color: var(--color-primary-fg);
}
.aiweb-brands__row--backdrop {
padding: var(--space-4);
background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
border-radius: var(--radius-xl);
}
.aiweb-brands__row--seps .aiweb-brands__item:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-end: calc(-1 * (var(--aiweb-brands-gap) + var(--space-2)) / 2);
inset-block-start: 50%;
translate: 0 -50%;
inline-size: var(--space-2);
block-size: var(--space-3);
background-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
@media (min-width: 768px) {
.aiweb-brands__row {
--aiweb-brands-gap: var(--space-4);
overflow: visible;
}
.aiweb-brands__row .aiweb-brands__card {
flex: 1 1 0;
min-inline-size: 0;
}
.aiweb-brands__all {
flex: 0 0 auto;
min-inline-size: calc(var(--space-16) + var(--space-8));
}
.aiweb-brands__row .aiweb-brands__card--feat {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: repeat(3, auto);
align-items: center;
align-content: center;
justify-items: start;
column-gap: var(--space-4);
row-gap: 0;
flex-grow: 2.2;
padding-inline: var(--space-5);
text-align: start;
}
.aiweb-brands__card--feat .aiweb-brands__logo {
grid-column: 1;
grid-row: 1 / -1;
inline-size: calc(var(--space-16) * 2);
}
.aiweb-brands__card--feat .aiweb-brands__stat {
justify-content: flex-start;
}
.aiweb-brands__card--feat .aiweb-brands__stat--alt,
.aiweb-brands__card--feat .aiweb-brands__cta {
margin-block-start: var(--space-2);
}
}
@media (hover: hover) {
.aiweb-brands__card,
.aiweb-brands__all {
transition: box-shadow var(--transition-base), color var(--transition-base);
}
.aiweb-brands__card:hover,
.aiweb-brands__all:hover {
color: var(--color-primary-fg);
box-shadow: var(--shadow-hover);
}
}
.aiweb-aboutsum__inner {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.aiweb-aboutsum__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
}
.aiweb-aboutsum__head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.aiweb-aboutsum__mark {
display: grid;
place-items: center;
flex: 0 0 auto;
inline-size: var(--space-12);
block-size: var(--space-12);
color: var(--color-primary);
background-color: var(--aiweb-aboutsum-icon-bg, var(--color-primary-soft));
border-radius: var(--radius-pill);
overflow: hidden;
}
.aiweb-aboutsum__mark-img {
inline-size: var(--space-8);
block-size: var(--space-8);
object-fit: contain;
}
.aiweb-aboutsum__headings {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-aboutsum__title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
}
.aiweb-aboutsum__subtitle {
color: var(--text-secondary);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
}
.aiweb-aboutsum__text {
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body-lg);
text-align: justify;
}
.aiweb-aboutsum__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-block-start: var(--space-2);
}
.aiweb-aboutsum__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
min-inline-size: 0;
padding-block-start: var(--space-3);
border-block-start: 2px solid var(--aiweb-aboutsum-rule, var(--border));
text-align: center;
}
.aiweb-aboutsum__stat:nth-child(-n+2) {
padding-block-start: 0;
border-block-start: 0;
}
.aiweb-aboutsum__stat-value {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
}
.aiweb-aboutsum__stat-label {
color: var(--text-secondary);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
}
.aiweb-aboutsum__cta {
align-self: flex-start;
margin-block-start: var(--space-2);
}
.aiweb-aboutsum__media {
position: relative;
display: grid;
min-inline-size: 0;
}
.aiweb-aboutsum__picture {
display: block;
z-index: 1;
}
.aiweb-aboutsum__img {
display: block;
inline-size: 100%;
block-size: auto;
}
.aiweb-aboutsum--arch .aiweb-aboutsum__media::before {
content: "";
position: absolute;
inset-block: var(--space-4) 0;
inset-inline: var(--space-8);
border: 1px solid var(--border);
border-radius: var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg);
}
.aiweb-aboutsum--media-first .aiweb-aboutsum__media {
order: -1;
}
@media (min-width: 768px) {
.aiweb-aboutsum__stats {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
.aiweb-aboutsum__stat {
padding-block-start: 0;
padding-inline-end: var(--space-4);
border-block-start: 0;
border-inline-end: 2px solid var(--aiweb-aboutsum-rule, var(--border));
}
.aiweb-aboutsum__stat:last-child {
padding-inline-end: 0;
border-inline-end: 0;
}
}
@media (min-width: 1024px) {
.aiweb-aboutsum__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
}
.aiweb-aboutsum--media-first .aiweb-aboutsum__media {
order: 0;
}
}
.aiweb-proshow__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.aiweb-proshow__headings {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-proshow__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
}
.aiweb-proshow__subtitle {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
color: var(--text-secondary);
}
.aiweb-proshow__gem {
order: -1;
position: relative;
flex: 0 0 auto;
inline-size: var(--space-6);
block-size: var(--space-6);
}
.aiweb-proshow__gem i {
position: absolute;
border-radius: var(--radius-pill);
rotate: 45deg;
}
.aiweb-proshow__gem-a {
inline-size: var(--space-4);
block-size: var(--space-4);
inset-block-start: 0;
inset-inline-end: 0;
border-start-start-radius: 0;
background-color: var(--aiweb-proshow-accent, var(--color-discount));
}
.aiweb-proshow__gem-b {
inline-size: var(--space-3);
block-size: var(--space-3);
inset-block-end: 0;
inset-inline-start: 0;
border-end-end-radius: 0;
background-color: var(--color-primary);
}
.aiweb-proshow__all {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-2);
margin-inline-start: auto;
padding-block: var(--space-2);
padding-inline: var(--space-4);
color: var(--text-primary);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-proshow__all-label {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
}
.aiweb-proshow__all-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--color-primary-fg);
}
.aiweb-proshow__grid {
--aiweb-proshow-w: calc((100% - var(--space-3)) / 1.9);
align-items: stretch;
}
.aiweb-proshow__grid .aiweb-proshow__card {
flex: 0 0 var(--aiweb-proshow-w);
}
.aiweb-proshow__grid--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.aiweb-proshow__card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-inline-size: 0;
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-proshow__media {
position: relative;
display: block;
inline-size: 100%;
aspect-ratio: 1 / 1;
background-color: var(--aiweb-proshow-frame, var(--background));
border-radius: var(--radius-md);
overflow: hidden;
}
.aiweb-proshow__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-proshow__chip {
position: absolute;
z-index: 1;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
max-inline-size: calc(100% - var(--space-10));
padding-block: var(--space-1);
padding-inline: var(--space-2);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--text-primary);
background-color: color-mix(in srgb, var(--surface) 78%, transparent);
border-radius: var(--radius-pill);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aiweb-proshow__badge {
position: absolute;
z-index: 1;
inset-block-start: var(--space-2);
inset-inline-end: var(--space-2);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding-block: var(--space-1);
padding-inline: var(--space-2);
color: var(--text-on-primary);
background-color: var(--aiweb-proshow-accent, var(--color-discount));
border-radius: var(--radius-sm);
}
.aiweb-proshow__badge .aiweb-badge--discount {
padding: 0;
color: inherit;
background-color: transparent;
}
.aiweb-proshow__badge-label {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: 1;
}
.aiweb-proshow__title-p {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: var(--lh-body);
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aiweb-proshow__link {
color: var(--text-primary);
}
.aiweb-proshow__link::after {
content: "";
position: absolute;
inset: 0;
}
.aiweb-proshow__sub {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
color: var(--text-secondary);
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aiweb-proshow__foot {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
margin-block-start: auto;
padding-block-start: var(--space-1);
}
.aiweb-proshow__price {
min-inline-size: 0;
}
.aiweb-proshow__price .aiweb-price {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--space-1);
}
.aiweb-proshow__foot .aiweb-product-card__cart {
--aiweb-proshow-cta: calc(var(--space-10) + var(--space-1)); 
flex: 0 0 auto;
inline-size: 100%;
block-size: var(--aiweb-proshow-cta);
}
.aiweb-proshow__foot .aiweb-product-card__stepper {
position: static;
flex-direction: row;
justify-content: center;
block-size: 100%;
color: var(--color-primary-fg);
background-color: var(--color-primary-soft);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid transparent;
border-radius: var(--radius-pill);
box-shadow: none;
}
.aiweb-proshow__foot .aiweb-product-card__step {
flex: 0 0 auto;
gap: var(--space-2);
inline-size: auto;
min-block-size: var(--aiweb-proshow-cta);
padding-inline: var(--space-3);
}
.aiweb-proshow__foot .aiweb-product-card__count {
flex: 1 1 auto;
inline-size: auto;
min-block-size: 0;
color: inherit;
}
.aiweb-proshow__foot .aiweb-product-card__cart.is-collapsed .aiweb-product-card__step--up,
.aiweb-proshow__foot .aiweb-product-card__step--view {
flex: 1 1 auto;
min-block-size: var(--aiweb-proshow-cta);
}
.aiweb-proshow__foot .aiweb-product-card__cta-text {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
white-space: nowrap;
}
.aiweb-proshow__foot .aiweb-product-card__cart:not(.is-collapsed):not(.aiweb-product-card__cart--view) .aiweb-product-card__cta-text {
display: none;
}
.aiweb-proshow__foot .aiweb-product-card__cart.is-collapsed .aiweb-product-card__step--up > .aiweb-icon--plus {
display: none;
}
.aiweb-proshow--backdrop > .aiweb-app {
padding: var(--space-4);
background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
.aiweb-proshow__grid {
display: grid;
grid-template-columns: repeat(var(--aiweb-proshow-cols, 3), minmax(0, 1fr));
gap: var(--space-4);
overflow: visible;
padding-block: var(--space-2);
}
.aiweb-proshow__grid .aiweb-proshow__card {
flex: initial;
}
.aiweb-proshow__card {
padding: var(--space-4);
}
.aiweb-proshow__foot {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.aiweb-proshow__foot .aiweb-product-card__cart {
inline-size: auto;
min-inline-size: 0;
}
.aiweb-proshow__all {
padding-inline: var(--space-5);
}
}
@media (min-width: 1024px) {
.aiweb-proshow__grid {
grid-template-columns: repeat(var(--aiweb-proshow-cols, 4), minmax(0, 1fr));
}
.aiweb-proshow__title {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
}
}
@media (hover: hover) {
.aiweb-proshow__card,
.aiweb-proshow__all {
transition: box-shadow var(--transition-base);
}
.aiweb-proshow__card:hover,
.aiweb-proshow__all:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-proshow__all:hover .aiweb-proshow__all-label {
color: var(--color-primary-fg);
}
}
.aiweb-propick__frame {
position: relative;
}
.aiweb-propick__head {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.aiweb-propick__tab {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
inline-size: 62%;
padding-block: var(--space-3);
padding-inline: var(--space-4);
color: var(--text-on-primary);
background-color: var(--aiweb-propick-color, var(--color-discount));
border-radius: var(--radius-lg);
}
.aiweb-propick__tab::after {
content: "";
position: absolute;
z-index: -1;
inset-block-start: 50%;
inset-block-end: calc(-1 * var(--aiweb-propick-drop, calc(var(--space-12) * 5)));
inset-inline: 0;
background-color: var(--aiweb-propick-color, var(--color-discount));
border-end-start-radius: var(--radius-lg);
border-end-end-radius: var(--radius-lg);
}
.aiweb-propick__all-wrap {
position: relative;
display: flex;
flex: 0 1 auto;
align-items: flex-start;
align-self: center;
min-inline-size: 0;
margin-inline-start: auto;
padding: var(--space-2);
background-color: var(--border);
border-radius: var(--radius-lg);
}
.aiweb-propick__all-wrap::after {
content: "";
position: absolute;
z-index: -1;
display: none;
inset-block-start: 50%;
inset-block-end: calc(-1 * var(--aiweb-propick-drop, calc(var(--space-12) * 5)));
inset-inline: 0;
background-color: var(--border);
border-end-start-radius: var(--radius-lg);
border-end-end-radius: var(--radius-lg);
}
.aiweb-propick__tab-text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-propick__tab-title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
color: inherit;
}
.aiweb-propick__tab-sub {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
color: color-mix(in srgb, currentColor 80%, transparent);
}
.aiweb-propick__tab-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
inline-size: var(--space-8);
block-size: var(--space-8);
color: inherit;
}
.aiweb-propick__tab-img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-propick__all {
display: flex;
align-items: center;
gap: var(--space-2);
padding-block: var(--space-2);
padding-inline: var(--space-3);
color: var(--text-primary);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-propick__all-label {
min-inline-size: 0;
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
}
.aiweb-propick__all-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--color-primary-fg);
}
.aiweb-propick__panel {
position: relative;
z-index: 2;
--aiweb-propick-inset: var(--space-3);
padding-inline-start: var(--aiweb-propick-inset);
}
.aiweb-propick--flat .aiweb-propick__tab::after,
.aiweb-propick--flat .aiweb-propick__all-wrap::after {
display: none;
}
.aiweb-propick--flat .aiweb-propick__tab {
margin-inline-start: 0;
padding-inline-start: var(--space-4);
padding-inline-end: var(--space-4);
}
.aiweb-propick--flat .aiweb-propick__all-wrap {
align-self: center;
margin-inline-end: 0;
padding-inline-end: var(--space-2);
}
.aiweb-propick__grid {
--aiweb-propick-w: calc((100% - var(--space-3) + var(--aiweb-propick-inset, 0px)) / 1.9);
align-items: stretch;
}
.aiweb-propick__grid .aiweb-propick__card {
flex: 0 0 var(--aiweb-propick-w);
}
.aiweb-propick__grid--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.aiweb-propick__card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-propick__media {
position: relative;
display: block;
inline-size: 100%;
aspect-ratio: 1 / 1;
background-color: var(--background);
border-radius: var(--radius-md);
overflow: hidden;
}
.aiweb-propick__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-propick__badge {
position: absolute;
z-index: 1;
inset-block-start: var(--space-2);
inset-inline-end: var(--space-2);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding-block: var(--space-1);
padding-inline: var(--space-2);
color: var(--text-on-primary);
background-color: var(--aiweb-propick-color, var(--color-discount));
border-radius: var(--radius-sm);
}
.aiweb-propick__badge .aiweb-badge--discount {
padding: 0;
color: inherit;
background-color: transparent;
}
.aiweb-propick__badge-label {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: 1;
}
.aiweb-propick__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2);
}
.aiweb-propick__title {
min-inline-size: 0;
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: var(--lh-body);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aiweb-propick__link {
color: var(--text-primary);
}
.aiweb-propick__link::after {
content: "";
position: absolute;
inset: 0;
}
.aiweb-propick__price {
flex: 0 0 auto;
white-space: nowrap;
}
.aiweb-propick__price .aiweb-price {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--space-1);
}
.aiweb-propick__card .aiweb-product-card__cart {
--aiweb-propick-cta: calc(var(--space-10) + var(--space-1)); 
inline-size: 100%;
block-size: var(--aiweb-propick-cta);
margin-block-start: auto; 
}
.aiweb-propick__card .aiweb-product-card__stepper {
position: static;
flex-direction: row;
justify-content: center;
block-size: 100%;
color: var(--color-primary-fg);
background-color: var(--color-primary-soft);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid transparent;
border-radius: var(--radius-pill);
box-shadow: none;
}
.aiweb-propick__card .aiweb-product-card__step {
flex: 0 0 auto;
gap: var(--space-2);
inline-size: auto;
min-block-size: var(--aiweb-propick-cta);
padding-inline: var(--space-3);
}
.aiweb-propick__card .aiweb-product-card__count {
flex: 1 1 auto;
inline-size: auto;
min-block-size: 0;
color: inherit;
}
.aiweb-propick__card .aiweb-product-card__cart.is-collapsed .aiweb-product-card__step--up,
.aiweb-propick__card .aiweb-product-card__step--view {
flex: 1 1 auto;
min-block-size: var(--aiweb-propick-cta);
}
.aiweb-propick__card .aiweb-product-card__cta-text {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
white-space: nowrap;
}
.aiweb-propick__card .aiweb-product-card__cart:not(.is-collapsed):not(.aiweb-product-card__cart--view) .aiweb-product-card__cta-text {
display: none;
}
.aiweb-propick__card .aiweb-product-card__cart.is-collapsed .aiweb-product-card__step--up > .aiweb-icon--plus {
display: none;
}
@media (min-width: 768px) {
.aiweb-propick__all-wrap::after {
display: block;
}
.aiweb-propick__head {
gap: var(--space-4);
}
.aiweb-propick__tab {
flex: 0 1 auto;
gap: var(--space-3);
inline-size: auto;      
max-inline-size: 62%;
margin-inline-start: calc(-1 * var(--space-6));
padding-inline-start: calc(var(--space-4) + var(--space-6));
}
.aiweb-propick__tab-icon {
inline-size: var(--space-10);
block-size: var(--space-10);
}
.aiweb-propick__all-wrap {
align-self: stretch;
margin-inline-end: calc(-1 * var(--space-6));
padding-inline-end: calc(var(--space-2) + var(--space-6));
}
.aiweb-propick__panel {
padding-inline-start: 0;
}
.aiweb-propick__grid {
display: grid;
grid-template-columns: repeat(var(--aiweb-propick-cols, 3), minmax(0, 1fr));
gap: var(--space-4);
overflow: visible;
padding-block: var(--space-2);
}
.aiweb-propick__grid .aiweb-propick__card {
flex: initial;
}
.aiweb-propick__card {
padding: var(--space-4);
}
.aiweb-propick__all {
padding-inline: var(--space-5);
}
}
@media (min-width: 1024px) {
.aiweb-propick__grid {
grid-template-columns: repeat(var(--aiweb-propick-cols, 4), minmax(0, 1fr));
}
.aiweb-propick__tab-title {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
}
}
@media (hover: hover) {
.aiweb-propick__card,
.aiweb-propick__all {
transition: box-shadow var(--transition-base);
}
.aiweb-propick__card:hover,
.aiweb-propick__all:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-propick__all:hover .aiweb-propick__all-label {
color: var(--color-primary-fg);
}
}
.aiweb-newsbox__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.aiweb-newsbox__headings {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-newsbox__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
}
.aiweb-newsbox__subtitle {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
color: var(--text-secondary);
}
.aiweb-newsbox__gem {
order: -1;
position: relative;
flex: 0 0 auto;
inline-size: var(--space-6);
block-size: var(--space-6);
}
.aiweb-newsbox__gem i {
position: absolute;
border-radius: var(--radius-pill);
rotate: 45deg;
}
.aiweb-newsbox__gem-a {
inline-size: var(--space-4);
block-size: var(--space-4);
inset-block-start: 0;
inset-inline-end: 0;
border-start-start-radius: 0;
background-color: var(--aiweb-newsbox-accent, var(--color-discount));
}
.aiweb-newsbox__gem-b {
inline-size: var(--space-3);
block-size: var(--space-3);
inset-block-end: 0;
inset-inline-start: 0;
border-end-end-radius: 0;
background-color: var(--color-primary);
}
.aiweb-newsbox__all {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-2);
min-block-size: calc(var(--space-10) + var(--space-1)); 
margin-inline-start: auto;
padding-block: var(--space-2);
padding-inline: var(--space-4);
color: var(--text-primary);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-newsbox__all-label {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
}
.aiweb-newsbox__all-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--color-primary-fg);
}
.aiweb-newsbox__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.aiweb-newsbox__feat {
z-index: 2;
}
.aiweb-newsbox__side,
.aiweb-newsbox__aside {
z-index: 1;
}
.aiweb-newsbox__feat {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-nav);
}
.aiweb-newsbox__feat-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background-color: var(--background);
border-radius: var(--radius-md);
}
.aiweb-newsbox__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-newsbox__media--placeholder {
display: flex;
align-items: center;
justify-content: center;
}
.aiweb-newsbox__placeholder {
display: inline-flex;
color: var(--text-muted);
}
.aiweb-newsbox__chip {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
padding-block: var(--space-1);
padding-inline: var(--space-3);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--text-primary);
background-color: var(--surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-card);
}
.aiweb-newsbox__feat-title {
min-inline-size: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
line-height: var(--lh-body-lg);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aiweb-newsbox__link {
color: inherit;
}
.aiweb-newsbox__excerpt {
min-inline-size: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aiweb-newsbox__meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-start: auto;
}
.aiweb-newsbox__date {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-secondary);
}
.aiweb-newsbox__date-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--aiweb-newsbox-accent, var(--color-discount));
}
.aiweb-newsbox__read {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-block-size: calc(var(--space-10) + var(--space-1)); 
margin-inline-start: auto;
padding-block: var(--space-2);
padding-inline: var(--space-5);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
color: var(--color-primary-fg);
background-color: var(--color-primary-soft);
border-radius: var(--radius-pill);
}
.aiweb-newsbox__side {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-newsbox__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-newsbox__item-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-newsbox__item-title {
min-inline-size: 0;
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: var(--lh-body);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aiweb-newsbox__item-meta {
display: flex;
align-items: center;
gap: var(--space-2);
}
.aiweb-newsbox__item-more {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-inline-start: auto;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-secondary);
}
.aiweb-newsbox__item-media {
position: relative;
display: block;
flex: 0 0 auto;
overflow: hidden;
inline-size: var(--aiweb-newsbox-thumb, var(--space-16));
aspect-ratio: 1 / 1;
background-color: var(--background);
border-radius: var(--radius-md);
}
.aiweb-newsbox__chips {
list-style: none;
margin: 0;
padding: 0;
}
.aiweb-newsbox__chip-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: calc(var(--space-10) + var(--space-1)); 
padding-block: var(--space-2);
padding-inline: var(--space-4);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
color: var(--text-primary);
background-color: var(--surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-card);
}
.aiweb-newsbox__chip-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--aiweb-newsbox-accent, var(--color-discount));
}
.aiweb-newsbox__chip-arrow {
display: inline-flex;
flex: 0 0 auto;
color: var(--text-muted);
}
.aiweb-newsbox__aside {
display: none;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-newsbox__post {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
min-block-size: 0; 
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-newsbox__post-media {
position: relative;
display: block;
flex: 0 0 auto;
overflow: hidden;
aspect-ratio: 16 / 10;
background-color: var(--background);
border-radius: var(--radius-md);
}
.aiweb-newsbox__post-title {
min-inline-size: 0;
min-block-size: calc(2em * var(--lh-body));
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: var(--lh-body);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.aiweb-newsbox__grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr) minmax(0, 1fr);
align-items: stretch;
}
.aiweb-newsbox__aside {
display: flex;
grid-column: 1;
grid-row: 1;
}
.aiweb-newsbox__feat {
grid-column: 2;
grid-row: 1;
}
.aiweb-newsbox__side {
grid-column: 3;
grid-row: 1;
}
.aiweb-newsbox__grid--noaside {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.aiweb-newsbox__grid--noaside .aiweb-newsbox__feat {
grid-column: 1;
grid-row: 1;
}
.aiweb-newsbox__grid--noaside .aiweb-newsbox__side {
grid-column: 2;
grid-row: 1;
}
.aiweb-newsbox__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
overflow: visible;
margin-block-start: var(--space-1);
}
.aiweb-newsbox__feat,
.aiweb-newsbox__item {
padding: var(--space-4);
}
.aiweb-newsbox__post {
flex: 1 1 0; 
gap: var(--space-2);
padding: var(--space-3);
}
.aiweb-newsbox__post-media {
flex: 1 1 auto;
aspect-ratio: auto;
min-block-size: calc(var(--space-16) + var(--space-2)); 
}
.aiweb-newsbox__feat-media {
aspect-ratio: 16 / 9;
}
}
@media (min-width: 1024px) {
.aiweb-newsbox {
--aiweb-newsbox-thumb: calc(var(--space-16) + var(--space-4)); 
}
}
@media (hover: hover) {
.aiweb-newsbox__feat,
.aiweb-newsbox__item,
.aiweb-newsbox__post,
.aiweb-newsbox__chip-link,
.aiweb-newsbox__all {
transition: box-shadow var(--transition-base);
}
.aiweb-newsbox__feat:hover,
.aiweb-newsbox__item:hover,
.aiweb-newsbox__post:hover,
.aiweb-newsbox__chip-link:hover,
.aiweb-newsbox__all:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-newsbox__all:hover .aiweb-newsbox__all-label {
color: var(--color-primary-fg);
}
}
.aiweb-home-section.aiweb-catbar--overlap {
position: relative;
z-index: 1;
margin-block-start: calc(var(--aiweb-sec-top, 0px) - var(--aiweb-catbar-overlap, var(--space-10)));
}
.aiweb-catbar__panel {
--aiweb-catbar-disc: calc(2 * var(--space-10));
padding-block: var(--space-2);
padding-inline: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.aiweb-catbar__panel {
background-color: color-mix(in srgb, var(--surface) 62%, transparent);
-webkit-backdrop-filter: blur(var(--space-4)) saturate(140%);
backdrop-filter: blur(var(--space-4)) saturate(140%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 80%, transparent), var(--shadow-card);
}
}
.aiweb-catbar__list {
margin-block: 0;
margin-inline: calc(-1 * var(--space-3));
padding-inline: var(--space-3);
list-style: none;
}
.aiweb-catbar__list > .aiweb-catbar__item {
flex: 1 0 max(var(--aiweb-catbar-disc), calc((100% - 2 * var(--space-3)) / 3.5));
min-inline-size: 0;
}
.aiweb-catbar__link {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding-block: var(--space-1);
block-size: 100%; 
color: var(--text-primary);
text-decoration: none;
}
.aiweb-catbar__disc {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
inline-size: var(--aiweb-catbar-disc);
block-size: var(--aiweb-catbar-disc);
padding: var(--space-3);
overflow: hidden;
border-radius: var(--radius-pill);
background-color: color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent), var(--shadow-card);
color: var(--color-primary-fg);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-catbar__img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-catbar__disc svg {
width: 36px;
height: 36px;
}
.aiweb-catbar__label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-inline-size: 100%;
overflow: hidden;
overflow-wrap: anywhere;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
text-align: center;
}
.aiweb-catbar__link.is-featured::after {
content: "";
inline-size: var(--space-6);
block-size: 2px;
margin-block-start: auto;
border-radius: var(--radius-pill);
background-color: var(--color-primary);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.aiweb-catbar__link:hover .aiweb-catbar__disc {
transform: translateY(calc(-1 * var(--space-1)));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent), var(--shadow-hover);
}
}
.aiweb-bestsellers__list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-sale__seal-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
block-size: 100%;
padding-block: var(--space-6);
padding-inline: var(--space-4);
color: var(--text-on-primary);
text-align: center;
background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-sale__seal-card:hover {
color: var(--text-on-primary);
}
.aiweb-sale__seal-title {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-sale__seal {
display: grid;
place-items: center;
inline-size: var(--space-16);
block-size: var(--space-16);
color: var(--color-primary-fg);
background-color: var(--surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-card);
}
.aiweb-sale__seal-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-sale__timer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
.aiweb-sale__timer-clock {
display: inline-flex;
align-items: center;
gap: var(--space-1);
direction: ltr; 
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.aiweb-sale__timer-num {
min-inline-size: 2ch;
padding-block: var(--space-1);
padding-inline: var(--space-1);
font-size: var(--fs-body);
line-height: 1;
text-align: center;
background-color: color-mix(in srgb, var(--text-on-primary) 18%, transparent);
border-radius: var(--radius-sm);
}
.aiweb-sale__timer-sep {
font-style: normal;
opacity: 0.7;
}
.aiweb-sale__timer-cap {
font-size: var(--fs-caption);
opacity: 0.85;
}
.aiweb-sale__timer.is-ended {
opacity: 0.6;
}
.aiweb-cashback-row {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-cashback {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-block-size: calc(var(--space-16) * 4 + var(--space-4));
padding: var(--space-6);
background: linear-gradient(135deg, var(--color-primary-soft), var(--surface));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-cashback__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-cashback__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-cashback__lead {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-body);
}
.aiweb-cashback__sub {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-cashback__art {
flex: 0 0 auto;
color: var(--color-star);
}
.aiweb-cashback__art--invite {
color: var(--color-primary);
}
.aiweb-strip__link {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-strip__img {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 1200 / 200; 
object-fit: cover;
}
.aiweb-strip__inner {
display: flex;
flex-wrap: wrap; 
align-items: center;
gap: var(--space-3) var(--space-4);
padding-block: var(--space-4);
padding-inline: var(--space-5);
background: var(--color-primary-soft);
border-radius: var(--radius-lg);
}
.aiweb-strip__content {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-strip__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-strip__text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-strip__cta {
margin-inline-start: auto;
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-strip2__link {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-strip2__img {
display: block;
inline-size: 100%;
block-size: auto; 
}
.aiweb-strip2__inner {
display: flex;
flex-wrap: wrap; 
align-items: center;
gap: var(--space-3) var(--space-4);
padding-block: var(--space-4);
padding-inline: var(--space-5);
background: var(--color-primary-soft);
border-radius: var(--radius-lg);
}
.aiweb-strip2__content {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-strip2__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-strip2__text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-strip2__cta {
margin-inline-start: auto;
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-banners__row {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-banners__cell {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
}
.aiweb-banners__cell--image {
display: block;
box-shadow: var(--shadow-card);
}
.aiweb-banners__img {
display: block;
inline-size: 100%;
block-size: auto;
}
.aiweb-banners__cell--text {
min-block-size: calc(var(--space-16) * 4 + var(--space-4));
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-primary-soft);
}
.aiweb-banners__text {
display: flex;
flex-direction: column;
align-items: flex-start; 
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-banners__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-banners__desc {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-banners__cta {
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-banners__art {
flex: 0 0 auto;
color: var(--color-star);
}
.aiweb-banners__art--alt {
color: var(--color-primary);
}
.aiweb-banners4__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
align-items: start; 
}
.aiweb-banners4__cell {
position: relative;
display: block;
overflow: hidden;
border-start-start-radius: var(--aiweb-b4-rss, var(--radius-lg));
border-start-end-radius: var(--aiweb-b4-rse, var(--radius-lg));
border-end-start-radius: var(--aiweb-b4-res, var(--radius-lg));
border-end-end-radius: var(--aiweb-b4-ree, var(--radius-lg));
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-banners4__cell:hover,
.aiweb-banners4__cell:focus-visible {
transform: translateY(calc(-1 * var(--space-1)));
box-shadow: var(--shadow-hover);
}
.aiweb-banners4__img {
display: block;
inline-size: 100%;
block-size: auto;
transition: transform var(--transition-base);
}
.aiweb-banners4__cell:hover .aiweb-banners4__img {
transform: scale(1.04);
}
.aiweb-banners4__cell--text {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4);
text-align: center;
background:
radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 58%),
var(--color-primary-soft);
}
.aiweb-banners4__deco {
display: grid;
place-items: center;
inline-size: var(--space-12);
block-size: var(--space-12);
border-radius: var(--radius-pill);
color: var(--color-primary-fg);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.aiweb-banners4__title {
color: var(--color-primary-fg);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-banners4__sub {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-banners4__cell,
.aiweb-banners4__img {
transition: none;
}
.aiweb-banners4__cell:hover,
.aiweb-banners4__cell:focus-visible {
transform: none;
}
.aiweb-banners4__cell:hover .aiweb-banners4__img {
transform: none;
}
}
.aiweb-banners3__row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
align-items: start; 
}
.aiweb-banners3__cell {
position: relative;
display: block;
overflow: hidden;
border-start-start-radius: var(--aiweb-b3-rss, var(--radius-lg));
border-start-end-radius: var(--aiweb-b3-rse, var(--radius-lg));
border-end-start-radius: var(--aiweb-b3-res, var(--radius-lg));
border-end-end-radius: var(--aiweb-b3-ree, var(--radius-lg));
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-banners3__cell:hover,
.aiweb-banners3__cell:focus-visible {
transform: translateY(calc(-1 * var(--space-1)));
box-shadow: var(--shadow-hover);
}
.aiweb-banners3__img {
display: block;
inline-size: 100%;
block-size: auto;
transition: transform var(--transition-base);
}
.aiweb-banners3__cell:hover .aiweb-banners3__img {
transform: scale(1.04);
}
.aiweb-banners3__cell--text {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-2);
text-align: center;
background:
radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 58%),
var(--color-primary-soft);
}
.aiweb-banners3__deco {
display: grid;
place-items: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-pill);
color: var(--color-primary-fg);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.aiweb-banners3__title {
color: var(--color-primary-fg);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-bold);
}
.aiweb-banners3__sub {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-banners3__cell,
.aiweb-banners3__img {
transition: none;
}
.aiweb-banners3__cell:hover,
.aiweb-banners3__cell:focus-visible {
transform: none;
}
.aiweb-banners3__cell:hover .aiweb-banners3__img {
transform: none;
}
}
.aiweb-instagram__row {
align-items: stretch;
}
.aiweb-instagram__cell {
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-instagram__cell:hover,
.aiweb-instagram__cell:focus-visible {
transform: translateY(calc(-1 * var(--space-1)));
box-shadow: var(--shadow-hover);
}
.aiweb-instagram__cell--text {
flex: 0 0 min(78vw, 300px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-5);
text-align: center;
background:
radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 58%),
var(--color-primary-soft);
}
.aiweb-instagram__deco {
display: grid;
place-items: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-pill);
color: var(--color-primary-fg);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.aiweb-instagram__title {
color: var(--color-primary-fg);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-instagram__sub,
.aiweb-instagram__handle {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-instagram__handle {
font-weight: var(--fw-semibold);
}
.aiweb-instagram__cta {
margin-block-start: var(--space-1);
}
.aiweb-instagram__cell--photo {
flex: 0 0 34vw;
display: block;
}
.aiweb-instagram__img {
display: block;
inline-size: 100%;
block-size: auto;
transition: transform var(--transition-base);
}
.aiweb-instagram__cell--photo:hover .aiweb-instagram__img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-instagram__cell,
.aiweb-instagram__img {
transition: none;
}
.aiweb-instagram__cell:hover,
.aiweb-instagram__cell:focus-visible {
transform: none;
}
.aiweb-instagram__cell--photo:hover .aiweb-instagram__img {
transform: none;
}
}
.aiweb-newsletter__card {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-8) var(--space-6);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: var(--text-on-primary);
box-shadow: var(--shadow-floating);
overflow: hidden;
isolation: isolate;
}
.aiweb-newsletter__card::before {
content: "";
position: absolute;
inset-block-start: -30%;
inset-inline-end: -15%;
inline-size: 55%;
aspect-ratio: 1;
border-radius: var(--radius-pill);
background: radial-gradient(circle, color-mix(in srgb, var(--text-on-primary) 20%, transparent), transparent 70%);
z-index: -1;
}
.aiweb-newsletter__body {
position: relative;
z-index: 1;
flex: 1 1 280px;
min-inline-size: 0;
}
.aiweb-newsletter__title {
margin: 0 0 var(--space-2);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-newsletter__text {
margin: 0 0 var(--space-5);
max-inline-size: 48ch;
color: color-mix(in srgb, var(--text-on-primary) 88%, transparent);
font-size: var(--fs-body);
}
.aiweb-newsletter__form {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-2);
max-inline-size: 440px;
}
.aiweb-newsletter__field {
flex: 1 1 200px;
min-inline-size: 0;
}
.aiweb-newsletter__input {
inline-size: 100%;
min-block-size: var(--space-12);
padding-inline: var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-primary);
font-size: var(--fs-body);
}
.aiweb-newsletter__input::placeholder {
color: var(--text-muted);
}
.aiweb-newsletter__input:focus-visible {
outline: 2px solid var(--text-on-primary);
outline-offset: 2px;
}
.aiweb-newsletter__submit {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--space-12);
padding-inline: var(--space-6);
border: 0;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--color-primary-fg);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
cursor: pointer;
transition: box-shadow var(--transition-base);
}
.aiweb-newsletter__submit:hover,
.aiweb-newsletter__submit:focus-visible {
box-shadow: var(--shadow-hover);
}
.aiweb-newsletter__submit:disabled {
cursor: default;
opacity: .65;
}
.aiweb-newsletter__hp {
position: absolute;
inset-inline-start: -9999px;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
}
.aiweb-newsletter__msg {
flex-basis: 100%;
margin: 0;
min-block-size: var(--space-5);
font-size: var(--fs-caption);
color: var(--text-on-primary);
}
.aiweb-newsletter__msg.is-ok {
font-weight: var(--fw-semibold);
}
.aiweb-newsletter__msg.is-error {
color: color-mix(in srgb, var(--text-on-primary) 55%, var(--color-discount) 65%);
font-weight: var(--fw-semibold);
}
.aiweb-newsletter__legal {
position: relative;
z-index: 1;
margin: var(--space-3) 0 0;
color: color-mix(in srgb, var(--text-on-primary) 75%, transparent);
font-size: var(--fs-caption);
}
.aiweb-newsletter__art {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-12);
block-size: var(--space-12);
border-radius: var(--radius-pill);
overflow: hidden;
color: var(--text-on-primary);
background: color-mix(in srgb, var(--text-on-primary) 14%, transparent);
}
.aiweb-newsletter__art-img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-testimonials__header {
margin-block-end: var(--space-6);
text-align: center;
}
.aiweb-testimonials__eyebrow {
display: block;
margin-block-end: var(--space-1);
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
}
.aiweb-testimonials__title {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
text-wrap: balance;
}
.aiweb-testimonials__cols {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.aiweb-stories {
display: flex;
gap: var(--space-3);
margin: 0;
padding: var(--space-1) 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-inline-start: var(--space-1);
}
.aiweb-stories::-webkit-scrollbar {
display: none;
}
.aiweb-story {
flex: 0 0 42%; 
scroll-snap-align: start;
}
.aiweb-story__ring {
display: block;
padding: 2.5px;
border-radius: var(--radius-lg);
background-image: linear-gradient(150deg, var(--color-primary), var(--color-discount));
}
.aiweb-story__frame {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 9 / 16;
border-radius: calc(var(--radius-lg) - 3px);
border: 2px solid var(--surface); 
background: var(--background);
}
.aiweb-story__frame--placeholder {
border: 0;
background-image: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
}
.aiweb-story__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-story__play {
position: absolute;
inset: 0;
margin: auto;
inline-size: calc(var(--space-12) + var(--space-1));
block-size: calc(var(--space-12) + var(--space-1));
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--color-primary-fg);
box-shadow: var(--shadow-hover);
cursor: pointer;
}
.aiweb-story__play--static {
cursor: default;
}
.aiweb-story__meta {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
display: flex;
flex-direction: column;
padding: var(--space-8) var(--space-3) var(--space-3);
background-image: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 92%, transparent), transparent);
text-align: start;
}
.aiweb-story__name {
color: var(--text-on-primary);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-story__role {
color: color-mix(in srgb, var(--text-on-primary) 82%, transparent);
font-size: var(--fs-caption);
}
@media (hover: hover) {
.aiweb-story__ring {
transition: transform var(--transition-base);
}
.aiweb-story:hover .aiweb-story__ring {
transform: translateY(-3px);
}
button.aiweb-story__play {
transition: transform var(--transition-base);
}
.aiweb-story:hover button.aiweb-story__play {
transform: scale(1.06);
}
.aiweb-catarch__card:hover .aiweb-catarch__frame,
.aiweb-catarch__card:focus-visible .aiweb-catarch__frame {
border-color: var(--color-primary);
box-shadow: var(--shadow-hover);
}
}
.aiweb-testimonials__comments {
position: relative;
}
.aiweb-tmarquee {
position: relative;
overflow: hidden;
block-size: calc(var(--space-16) * 5); 
}
.aiweb-tmarquee::before,
.aiweb-tmarquee::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: var(--space-8);
z-index: 1;
pointer-events: none;
}
.aiweb-tmarquee::before {
inset-block-start: 0;
background-image: linear-gradient(to bottom, var(--background), transparent);
}
.aiweb-tmarquee::after {
inset-block-end: 0;
background-image: linear-gradient(to top, var(--background), transparent);
}
.aiweb-tmarquee__track {
display: flow-root; 
animation: aiweb-tmarquee-scroll 32s linear infinite;
will-change: transform;
}
.aiweb-tmarquee:hover .aiweb-tmarquee__track {
animation-play-state: paused;
}
.aiweb-tmarquee__dup {
display: contents;
}
@keyframes aiweb-tmarquee-scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.aiweb-comment {
margin-block-end: var(--space-3);
padding: var(--space-4);
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.aiweb-comment__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-2);
}
.aiweb-comment__avatar {
flex: 0 0 auto;
inline-size: var(--space-10);
block-size: var(--space-10);
display: grid;
place-items: center;
border-radius: var(--radius-pill);
overflow: hidden;
box-shadow: 0 0 0 2px var(--color-primary); 
}
.aiweb-comment__avatar-img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-comment__avatar--placeholder {
background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.aiweb-comment__avatar-initial {
color: var(--text-on-primary);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1;
}
.aiweb-comment__id {
display: flex;
flex-direction: column;
min-inline-size: 0;
margin-inline-end: auto;
}
.aiweb-comment__name {
color: var(--text-primary);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-comment__role {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-comment__rating {
flex: 0 0 auto;
}
.aiweb-comment__quote {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-body);
line-height: var(--lh-body-lg);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.aiweb-tmarquee {
overflow-y: auto;
}
.aiweb-tmarquee__track {
animation: none;
}
.aiweb-tmarquee__dup {
display: none;
}
}
.aiweb-sheet__panel--video .aiweb-sheet__body {
padding: var(--space-4);
}
.aiweb-video-frame {
position: relative;
inline-size: min(100%, calc(72vh * 9 / 16));
margin-inline: auto;
aspect-ratio: 9 / 16;
max-block-size: 72vh;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-ink);
}
.aiweb-video-frame__media {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
border: 0;
}
@media (min-width: 768px) {
.aiweb-testimonials__cols {
flex-direction: row;
align-items: stretch;
gap: var(--space-6);
}
.aiweb-testimonials__cols > * {
flex: 1 1 0;
min-inline-size: 0;
}
.aiweb-testimonials__cols--single > * {
flex-basis: auto;
}
.aiweb-stories {
overflow: visible;
}
.aiweb-story {
flex: 1 1 0;
min-inline-size: 0;
}
.aiweb-testimonials__cols:not(.aiweb-testimonials__cols--single) .aiweb-tmarquee {
position: absolute;
inset: 0;
block-size: auto;
}
.aiweb-testimonials__cols--single .aiweb-tmarquee {
block-size: calc(var(--space-16) * 6);
}
}
@media (min-width: 768px) {
.aiweb-home .aiweb-app {
max-inline-size: var(--container-max);
padding-inline: var(--space-6);
}
.aiweb-home-section {
margin-block-start: var(--aiweb-sec-top, var(--space-12));
}
.aiweb-home-section:first-child {
margin-block-start: var(--aiweb-sec-top, 0);
}
.aiweb-hero__img--default {
aspect-ratio: 16 / 9;
}
.aiweb-hero__content {
padding: var(--space-8);
}
.aiweb-categories__cards .aiweb-category-card {
flex-basis: 22%;
}
.aiweb-catarch__rail {
--aiweb-catarch-w: calc((100% - var(--space-4) * 4) / 4.6);
gap: var(--space-4);
margin-inline: calc(-1 * var(--space-6));
padding-inline: var(--space-6);
}
.aiweb-catarch__frame {
padding: var(--space-3);
}
.aiweb-catarch__title {
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-catbar__panel {
--aiweb-catbar-disc: calc(2 * var(--space-16));
padding-block: var(--space-3);
padding-inline: var(--space-4);
}
.aiweb-catbar__list {
gap: var(--space-4);
margin-inline: calc(-1 * var(--space-4));
padding-inline: var(--space-4);
}
.aiweb-catbar__disc {
padding: var(--space-4);
}
.aiweb-catbar__list > .aiweb-catbar__item {
flex-basis: max(var(--aiweb-catbar-disc), calc((100% - 6 * var(--space-4)) / 7.5));
}
.aiweb-catbar__disc svg {
width: 44px;
height: 44px;
}
.aiweb-catbar__label {
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-bestsellers__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.aiweb-newest__carousel.aiweb-app,
.aiweb-sale__offers.aiweb-app,
.aiweb-articles__carousel.aiweb-app {
max-inline-size: min(100% - 2 * var(--space-6), var(--container-max) - 2 * var(--space-6));
padding-inline: 0;
}
.aiweb-pcard-track__item {
flex-basis: 30%;
}
.aiweb-articles__item {
flex-basis: 46%;
}
.aiweb-cashback-row,
.aiweb-banners__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aiweb-banners__row {
align-items: start;
}
.aiweb-banners4__row {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
.aiweb-banners3__row {
gap: var(--space-4);
}
.aiweb-banners3__cell--text {
gap: var(--space-2);
padding: var(--space-4);
}
.aiweb-banners3__deco {
inline-size: var(--space-12);
block-size: var(--space-12);
}
.aiweb-banners3__title {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
.aiweb-instagram__row {
gap: var(--space-4);
}
.aiweb-instagram__cell--text {
flex-basis: 300px;
padding: var(--space-6);
}
.aiweb-instagram__cell--photo {
flex-basis: 170px;
}
.aiweb-newsletter__card {
padding: var(--space-10);
}
.aiweb-newsletter__art {
inline-size: var(--space-16);
block-size: var(--space-16);
}
}
@media (min-width: 1024px) {
.aiweb-hero__img--default {
aspect-ratio: 27 / 9;
}
.aiweb-hero__content {
padding: var(--space-10);
}
.aiweb-categories__cards .aiweb-category-card {
flex-basis: 15%;
}
.aiweb-bestsellers__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aiweb-pcard-track__item {
flex-basis: 22%;
}
.aiweb-articles__item {
flex-basis: calc((100% - 3 * var(--space-3)) / 3.5);
}
}
@media (min-width: 1280px) {
.aiweb-pcard-track__item {
flex-basis: 18%;
}
}
.aiweb-about__inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.aiweb-about__content {
display: flex;
flex-direction: column;
align-items: flex-start; 
gap: var(--space-4);
min-inline-size: 0;
}
.aiweb-about__eyebrow {
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
}
.aiweb-about__title {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
text-wrap: balance;
}
.aiweb-about__text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-about__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-4);
inline-size: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.aiweb-about__feature {
display: flex;
align-items: center;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-about__feature-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: calc(var(--space-10) + var(--space-1)); 
block-size: calc(var(--space-10) + var(--space-1));
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-about__feature-label {
min-inline-size: 0;
color: var(--text-primary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
}
.aiweb-about__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-8);
inline-size: 100%;
margin: 0;
}
.aiweb-about__stat {
display: flex;
flex-direction: column;
}
.aiweb-about__stat-value {
color: var(--color-primary-fg);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-about__stat-label {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-about__cta {
margin-block-start: var(--space-2);
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-about__media {
position: relative;
inline-size: 100%;
}
.aiweb-about__media--collage {
padding-block-end: var(--space-8);
padding-inline-start: var(--space-8);
}
.aiweb-about__frame {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
background: var(--background);
}
.aiweb-about__frame--placeholder {
display: grid;
place-items: center;
background-image: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
color: var(--text-on-primary);
}
.aiweb-about__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-about__frame--overlap {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 46%;
aspect-ratio: 1 / 1;
border: 4px solid var(--surface);
box-shadow: var(--shadow-hover);
}
.aiweb-about__badge {
position: absolute;
inset-block-end: var(--space-4);
inset-inline-end: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-ink);
color: var(--text-on-primary);
box-shadow: var(--shadow-floating);
text-align: center;
}
.aiweb-about__badge-value {
font-size: var(--fs-h3);
line-height: 1;
font-weight: var(--fw-bold);
}
.aiweb-about__badge-label {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
}
@media (min-width: 768px) {
.aiweb-about__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--space-10);
}
}
@media (min-width: 1024px) {
.aiweb-about__inner {
gap: var(--space-16);
}
.aiweb-about__content {
gap: var(--space-5);
}
}
.aiweb-deals__box {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-4);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.aiweb-deals__flag {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
padding: var(--space-2) var(--space-5);
border-start-end-radius: var(--radius-xl);
border-end-start-radius: var(--radius-lg);
background: var(--color-discount);
color: var(--text-on-primary);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
}
.aiweb-deals__head {
display: flex;
align-items: center;
gap: var(--space-2);
padding-inline-end: calc(var(--space-16) + var(--space-12));
}
.aiweb-deals__head-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-md);
background: var(--color-danger-soft);
color: var(--color-discount);
}
.aiweb-deals__title {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-deals__body {
min-inline-size: 0;
margin-block-start: var(--space-4);
}
.aiweb-deals__main {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
}
.aiweb-deals__side {
display: none;
}
.aiweb-deals__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"media timer"
"name  name"
"price btns";
column-gap: var(--space-2); 
row-gap: var(--space-4);
align-items: center;
}
.aiweb-deals__name {
grid-area: name;
}
.aiweb-deals__btns {
grid-area: btns;
}
.aiweb-deals__panel[hidden] {
display: none;
}
@keyframes aiweb-deal-in {
from {
opacity: 0;
transform: translateY(var(--space-2));
}
to {
opacity: 1;
transform: none;
}
}
.aiweb-deals__panel:not([hidden]) {
animation: aiweb-deal-in 240ms ease;
}
.aiweb-deals__media {
grid-area: media;
position: relative;
min-inline-size: 0;
}
.aiweb-deals__img-link {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--background);
}
.aiweb-deals__img {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-lg);
}
.aiweb-deals__badge {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-start: var(--space-3);
}
.aiweb-deals__progress {
position: absolute;
inset-inline: 25%; 
inset-block-end: var(--space-3);
display: none;
block-size: var(--space-1);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-ink) 28%, transparent);
overflow: hidden;
}
.aiweb-deals__box.is-autoplay .aiweb-deals__progress {
display: block;
}
.aiweb-deals__progress-fill {
display: block;
inline-size: 0;
block-size: 100%;
border-radius: inherit;
background: var(--color-discount);
}
.aiweb-deals__progress-fill.is-running {
animation: aiweb-deal-progress var(--aiweb-deals-autoplay, 6000ms) linear forwards;
}
@keyframes aiweb-deal-progress {
from {
inline-size: 0;
}
to {
inline-size: 100%;
}
}
.aiweb-deals__info {
display: contents;
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-deals__name {
margin: 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-deals__name-link {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.aiweb-deals__name-link:hover {
color: var(--color-primary-fg);
}
.aiweb-deals__desc {
display: none;
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-deals__price {
grid-area: price;
margin-block-start: 0;
}
.aiweb-deals__price .aiweb-price__current {
align-items: baseline;
color: var(--color-discount);
}
.aiweb-deals__price .aiweb-price__amount {
font-size: var(--fs-h3);
}
.aiweb-deals__price .aiweb-price__unit {
color: inherit;
}
.aiweb-deals__price .aiweb-price__regular {
font-size: var(--fs-body);
}
.aiweb-deals__actions {
display: contents; 
align-items: flex-end;
flex-wrap: wrap;
gap: var(--space-3);
margin-block-start: auto;
padding-block-start: var(--space-1);
}
.aiweb-deals__btns {
display: flex;
align-items: center;
gap: var(--space-2);
margin-inline-start: auto;
}
.aiweb-deals__btn {
min-block-size: calc(var(--space-10) + var(--space-1)); 
}
.aiweb-deals__btn--view {
min-block-size: var(--space-12);
padding-inline: var(--space-3);
background-color: var(--color-primary);
color: var(--text-on-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
white-space: nowrap;
}
.aiweb-deals__btn--view:hover {
background-color: var(--color-primary-dark);
}
.aiweb-deals__timer {
grid-area: timer;
align-self: center;
justify-self: end; 
display: flex;
flex-direction: column-reverse; 
align-items: flex-end; 
gap: var(--space-3); 
}
.aiweb-deals__t {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-1);
}
.aiweb-deals__t-num {
display: grid;
place-items: center;
inline-size: var(--space-10); 
block-size: var(--space-10);
border: 1px solid var(--border);
border-radius: var(--radius-sm); 
background: var(--background);
color: var(--text-primary);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
font-style: normal;
}
.aiweb-deals__t--seconds .aiweb-deals__t-num {
border-color: var(--color-discount);
background: var(--color-discount);
color: var(--text-on-primary);
}
.aiweb-deals__t-cap {
writing-mode: vertical-rl; 
transform: rotate(180deg); 
color: var(--text-secondary);
font-size: var(--fs-caption);
font-style: normal;
}
.aiweb-deals__timer.is-ended .aiweb-deals__t-num {
border-color: var(--border);
background: var(--background);
color: var(--text-muted);
}
.aiweb-deals__rail {
display: flex;
align-items: center;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-deals__nav {
display: none;
place-items: center;
inline-size: calc(var(--space-10) + var(--space-1)); 
block-size: calc(var(--space-10) + var(--space-1));
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
transition: color var(--transition-base), border-color var(--transition-base);
}
.aiweb-deals__nav:hover {
color: var(--color-discount);
border-color: var(--color-discount);
}
.aiweb-deals__nav--up svg {
transform: rotate(180deg);
}
.aiweb-deals__thumbs {
display: flex;
flex: 1 1 auto;
gap: var(--space-3);
margin: 0;
padding: var(--space-1);
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.aiweb-deals__thumbs::-webkit-scrollbar {
display: none;
}
.aiweb-deals__thumb-item {
flex: 0 0 auto;
}
.aiweb-deals__thumb {
display: block;
inline-size: calc(var(--space-16) + var(--space-2)); 
block-size: calc(var(--space-16) + var(--space-2));
padding: var(--space-1);
border: 1px dashed transparent;
border-radius: var(--radius-pill);
background: var(--background);
cursor: pointer;
transition: border-color var(--transition-base);
}
.aiweb-deals__thumb:hover {
border-color: color-mix(in srgb, var(--color-discount) 45%, transparent);
}
.aiweb-deals__thumb.is-active {
border-color: var(--color-discount);
}
.aiweb-deals__thumb-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: var(--radius-pill);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-deals__panel:not([hidden]) {
animation: none;
}
.aiweb-deals__progress-fill.is-running {
animation: none;
}
}
@media (min-width: 1024px) {
.aiweb-deals__box {
padding: var(--space-5);
}
.aiweb-deals__body {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
gap: var(--space-6);
align-items: start;
margin-block-start: var(--space-4);
}
.aiweb-deals__main {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-6);
align-items: stretch;
}
.aiweb-deals__side {
display: block;
min-inline-size: 0;
}
.aiweb-deals__side .aiweb-product-card__title {
display: none;
}
.aiweb-deals__rail {
flex-direction: column;
align-self: center;
}
.aiweb-deals__nav {
display: grid;
}
.aiweb-deals__thumbs {
flex: 0 1 auto;
flex-direction: column;
max-block-size: calc((var(--space-16) + var(--space-2)) * 3 + var(--space-3) * 2);
overflow-x: hidden;
overflow-y: auto;
}
.aiweb-deals__price {
margin-block-start: auto;
margin-block-end: var(--space-2);
}
.aiweb-deals__timer {
flex-direction: row;
align-items: flex-start;
gap: var(--space-3);
}
.aiweb-deals__t {
flex-direction: column-reverse;
}
.aiweb-deals__t-cap {
writing-mode: horizontal-tb;
transform: none;
}
.aiweb-deals__name {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
.aiweb-deals__actions {
gap: var(--space-4);
align-items: flex-end;
margin-block-start: 0;
padding-block-start: 0;
}
.aiweb-deals__desc {
display: block;
}
.aiweb-deals__btn--view {
min-inline-size: calc(var(--space-16) * 3);
padding-inline: var(--space-5);
background-color: transparent;
color: var(--color-primary);
}
.aiweb-deals__btn--view:hover {
background-color: var(--color-primary-soft);
}
.aiweb-deals__panel {
display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
grid-template-areas: none;
gap: var(--space-6);
align-items: stretch;
}
.aiweb-deals__info,
.aiweb-deals__actions {
display: flex;
}
.aiweb-deals__media {
grid-area: auto;
}
.aiweb-deals__t-num {
inline-size: var(--space-12);
block-size: var(--space-12);
}
}
.aiweb-blogshow__head {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-block-end: var(--space-5);
}
.aiweb-blogshow__orn {
display: grid;
place-items: center;
color: var(--color-primary);
}
.aiweb-blogshow__heading {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
text-align: center;
}
.aiweb-blogshow__grid {
display: grid;
gap: var(--space-3);
}
.aiweb-blogshow__feat {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-lg);
background-color: var(--color-primary-soft);
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-blogshow__feat-media {
position: relative;
flex: 1 1 auto;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.aiweb-blogshow__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.aiweb-blogshow__media--placeholder {
display: grid;
place-items: center;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary-fg);
}
.aiweb-blogshow__badge {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
z-index: 2;
padding-block: var(--space-1);
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
background-color: var(--color-primary);
color: var(--text-on-primary);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
}
.aiweb-blogshow__feat-title {
z-index: 1;
margin-block-start: calc(-1 * var(--space-6));
margin-inline: var(--space-3);
padding-block: var(--space-3);
padding-inline: var(--space-4);
border-radius: var(--radius-md);
background-color: var(--surface);
box-shadow: var(--shadow-card);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-bold);
text-align: center;
}
.aiweb-blogshow__link {
color: var(--text-primary);
}
.aiweb-blogshow__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
}
.aiweb-blogshow__meta {
display: flex;
align-items: center;
gap: var(--space-2);
padding-block: var(--space-3);
padding-inline: var(--space-4);
}
.aiweb-blogshow__date {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-blogshow__more {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-inline-start: auto;
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
}
.aiweb-blogshow__col {
display: grid;
gap: var(--space-3);
}
.aiweb-blogshow__side {
position: relative;
display: flex;
align-items: stretch;
overflow: hidden;
border-radius: var(--radius-lg);
background-color: var(--color-primary-soft);
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-blogshow__side-media {
position: relative;
flex: 0 0 38%;
overflow: hidden;
}
.aiweb-blogshow__side-body {
display: flex;
flex: 1 1 auto;
min-inline-size: 0;
flex-direction: column;
gap: var(--space-1);
padding-block: var(--space-3);
padding-inline: var(--space-3);
}
.aiweb-blogshow__side-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-bold);
}
.aiweb-blogshow__side-body .aiweb-blogshow__more {
margin-block-start: auto;
margin-inline-start: auto;
}
.aiweb-blogshow__col--start .aiweb-blogshow__side {
flex-direction: row-reverse;
}
@media (min-width: 768px) {
.aiweb-blogshow__head {
margin-block-end: var(--space-6);
}
.aiweb-blogshow__heading {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
}
.aiweb-blogshow__grid {
grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
gap: var(--space-4);
align-items: stretch;
}
.aiweb-blogshow__feat {
grid-column: 2;
grid-row: 1;
}
.aiweb-blogshow__col--start {
grid-column: 1;
grid-row: 1;
}
.aiweb-blogshow__col--end {
grid-column: 3;
grid-row: 1;
}
.aiweb-blogshow__grid--solo {
grid-template-columns: minmax(0, 1fr);
}
.aiweb-blogshow__grid--solo .aiweb-blogshow__feat {
grid-column: 1;
}
.aiweb-blogshow__col {
grid-auto-rows: minmax(0, 1fr);
gap: var(--space-4);
}
.aiweb-blogshow__side-media {
flex-basis: 36%;
}
.aiweb-blogshow__side-title {
-webkit-line-clamp: 2;
line-clamp: 2;
font-size: var(--fs-caption);
line-height: var(--lh-body);
}
}
@media (min-width: 1024px) {
.aiweb-blogshow__grid,
.aiweb-blogshow__col {
gap: var(--space-5);
}
.aiweb-blogshow__side-body {
padding-block: var(--space-4);
padding-inline: var(--space-4);
}
.aiweb-blogshow__side-title {
font-size: var(--fs-body);
}
.aiweb-blogshow__feat-title {
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
}
}
@media (hover: hover) {
.aiweb-blogshow__feat:hover,
.aiweb-blogshow__side:hover {
transform: translateY(calc(-1 * var(--space-1)));
box-shadow: var(--shadow-hover);
}
.aiweb-blogshow__feat:hover .aiweb-blogshow__img,
.aiweb-blogshow__side:hover .aiweb-blogshow__img {
transform: scale(1.04);
}
.aiweb-blogshow__feat:hover .aiweb-blogshow__link,
.aiweb-blogshow__side:hover .aiweb-blogshow__link {
color: var(--color-primary-fg);
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-blogshow__feat,
.aiweb-blogshow__side,
.aiweb-blogshow__img {
transition: none;
}
.aiweb-blogshow__feat:hover,
.aiweb-blogshow__side:hover {
transform: none;
}
.aiweb-blogshow__feat:hover .aiweb-blogshow__img,
.aiweb-blogshow__side:hover .aiweb-blogshow__img {
transform: none;
}
}
.aiweb-herofull {
--aiweb-hf-glass: #FFFFFF;
--aiweb-hf-glass-ink: #16181D;
--aiweb-hf-glass-shadow: 0 6px 20px rgba(17, 24, 39, .05);
--aiweb-hf-glass-shadow-hover: 0 8px 24px rgba(17, 24, 39, .10);
--aiweb-hf-arch-x: var(--aiweb-hf-slider-radius-t, 46%);
--aiweb-hf-arch-y: calc(var(--aiweb-hf-arch-x) * .65);
--aiweb-hf-arch-b: var(--aiweb-hf-slider-radius-b, var(--radius-lg));
--aiweb-hf-arch: var(--aiweb-hf-arch-x) var(--aiweb-hf-arch-x) var(--aiweb-hf-arch-b) var(--aiweb-hf-arch-b) / var(--aiweb-hf-arch-y) var(--aiweb-hf-arch-y) var(--aiweb-hf-arch-b) var(--aiweb-hf-arch-b);
--aiweb-hf-arch-inner-x: calc(var(--aiweb-hf-arch-x) - 1%);
--aiweb-hf-arch-inner-y: calc(var(--aiweb-hf-arch-y) - 1%);
--aiweb-hf-arch-inner-b: max(0px, calc(var(--aiweb-hf-arch-b) - var(--aiweb-hf-slider-frame, var(--space-2))));
--aiweb-hf-arch-inner: var(--aiweb-hf-arch-inner-x) var(--aiweb-hf-arch-inner-x) var(--aiweb-hf-arch-inner-b) var(--aiweb-hf-arch-inner-b) / var(--aiweb-hf-arch-inner-y) var(--aiweb-hf-arch-inner-y) var(--aiweb-hf-arch-inner-b) var(--aiweb-hf-arch-inner-b);
}
.aiweb-herofull__stage {
position: relative;
display: grid;
overflow: clip;
container-type: inline-size;
}
.aiweb-herofull__picture {
grid-area: 1 / 1;
display: block;
}
.aiweb-herofull__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-herofull__overlay {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4cqi;
padding-block: 20cqi 6cqi;
padding-inline: 8cqi;
}
.aiweb-herofull__panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4cqi;
text-align: center;
transform: translateY(var(--aiweb-hf-panel-y-m, 0px));
}
.aiweb-herofull__title {
margin: 0;
font-size: max(var(--fs-h3), 5.6cqi);
line-height: var(--lh-h1);
font-weight: var(--fw-bold);
color: var(--aiweb-hf-title, var(--text-primary));
}
.aiweb-herofull__accent {
color: var(--aiweb-hf-accent, var(--color-primary));
}
.aiweb-herofull__rule {
display: flex;
align-items: center;
gap: var(--space-2);
inline-size: 100%;
color: var(--aiweb-hf-accent, var(--color-primary));
}
.aiweb-herofull__rule-line {
flex: 1;
block-size: 1px;
background-color: currentColor;
opacity: .35;
}
.aiweb-herofull__rule-star {
display: inline-flex;
}
.aiweb-herofull__rule-star .aiweb-icon {
inline-size: max(var(--space-4), 3cqi);
block-size: max(var(--space-4), 3cqi);
}
.aiweb-herofull__text {
margin: 0;
font-size: max(var(--fs-body), 3.2cqi);
line-height: var(--lh-body-lg);
color: var(--aiweb-hf-text, var(--text-secondary));
}
.aiweb-herofull__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-block-size: max(var(--space-12), 10cqi);
padding-inline: max(var(--space-5), 5cqi);
border-radius: var(--radius-pill);
font-size: max(var(--fs-body), 3.2cqi);
font-weight: var(--fw-bold);
color: var(--text-on-primary);
text-decoration: none;
background-image: linear-gradient(to right, var(--aiweb-hf-cta, var(--color-primary)), color-mix(in srgb, var(--aiweb-hf-cta, var(--color-primary)) 84%, #000));
box-shadow: var(--aiweb-hf-glass-shadow-hover);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-herofull__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: max(var(--space-6), 5.6cqi);
block-size: max(var(--space-6), 5.6cqi);
border-radius: var(--radius-pill);
background-color: color-mix(in srgb, var(--text-on-primary) 22%, transparent);
}
.aiweb-herofull__cta-icon .aiweb-icon {
inline-size: max(var(--space-4), 3.2cqi);
block-size: max(var(--space-4), 3.2cqi);
}
.aiweb-herofull__foot {
display: flex;
flex-direction: column;
gap: 1.4cqi;
transform: translateY(var(--aiweb-hf-foot-y-m, 0px));
}
.aiweb-herofull__chips,
.aiweb-herofull__trust {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.aiweb-herofull__chips {
gap: 2.4cqi;
}
.aiweb-herofull__chip-item {
flex: 1;
min-inline-size: 0;
}
.aiweb-herofull__chip,
.aiweb-herofull__trust {
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--aiweb-hf-glass) 70%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiweb-hf-glass) 80%, transparent), var(--aiweb-hf-glass-shadow);
}
.aiweb-herofull__chip {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: max(var(--space-12), 10.5cqi);
block-size: 100%;
padding-inline: var(--space-2);
text-decoration: none;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-herofull__chip-media {
display: inline-flex;
flex: none;
inline-size: max(var(--space-8), 6.4cqi);
block-size: max(var(--space-8), 6.4cqi);
}
.aiweb-herofull__chip-img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-herofull__chip-label {
overflow: hidden;
font-size: max(var(--fs-caption), 2.8cqi);
font-weight: var(--fw-bold);
color: var(--aiweb-hf-title, var(--aiweb-hf-glass-ink));
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-herofull__trust {
padding: 1cqi var(--space-1);
}
.aiweb-herofull__trust-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: var(--space-1);
min-inline-size: 0;
text-align: center;
}
.aiweb-herofull__trust-item + .aiweb-herofull__trust-item {
border-inline-start: 1px solid color-mix(in srgb, var(--aiweb-hf-glass-ink) 14%, transparent);
}
.aiweb-herofull__trust-icon {
display: inline-flex;
color: var(--aiweb-hf-accent, var(--color-primary));
}
.aiweb-herofull__trust-icon .aiweb-icon {
inline-size: max(var(--space-4), 4cqi);
block-size: max(var(--space-4), 4cqi);
}
.aiweb-herofull__trust-body {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.aiweb-herofull__trust-title {
font-size: max(var(--fs-caption), 2.4cqi);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
color: var(--aiweb-hf-title, var(--aiweb-hf-glass-ink));
}
.aiweb-herofull__trust-desc {
font-size: max(var(--fs-caption), 1.8cqi);
line-height: var(--lh-caption);
color: var(--aiweb-hf-text, color-mix(in srgb, var(--aiweb-hf-glass-ink) 60%, var(--aiweb-hf-glass)));
}
.aiweb-herofull__marquee {
--aiweb-hf-mq-fade: 14%;
container-type: inline-size;
overflow: hidden;
padding-block: var(--aiweb-hf-mq-offset, var(--space-4));
-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--aiweb-hf-mq-fade), #000 calc(100% - var(--aiweb-hf-mq-fade)), transparent);
mask-image: linear-gradient(to right, transparent, #000 var(--aiweb-hf-mq-fade), #000 calc(100% - var(--aiweb-hf-mq-fade)), transparent);
}
.aiweb-herofull__marquee-track {
display: flex;
inline-size: max-content;
margin: 0;
padding: 0;
list-style: none;
animation: aiweb-hf-marquee var(--aiweb-hf-mq-speed, 40s) linear infinite reverse;
will-change: transform;
}
.aiweb-herofull__marquee--right .aiweb-herofull__marquee-track {
animation-direction: normal;
}
@keyframes aiweb-hf-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(50%);
}
}
.aiweb-herofull__marquee-item {
flex: none;
inline-size: calc(100cqi / 3);
padding-inline: calc(var(--space-2) / 2);
}
.aiweb-herofull__marquee-item:nth-child(odd) {
transform: translateY(calc(-1 * var(--aiweb-hf-mq-offset, var(--space-4))));
}
.aiweb-herofull__marquee-item:nth-child(even) {
transform: translateY(var(--aiweb-hf-mq-offset, var(--space-4)));
}
.aiweb-herofull__marquee-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
block-size: 100%;
padding: var(--space-2);
border-radius: var(--radius-lg);
text-decoration: none;
background-color: color-mix(in srgb, var(--aiweb-hf-glass) 70%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiweb-hf-glass) 80%, transparent), var(--aiweb-hf-glass-shadow);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-herofull__marquee-media {
display: block;
inline-size: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--aiweb-hf-glass) 60%, transparent);
}
.aiweb-herofull__marquee-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-herofull__marquee-title {
overflow: hidden;
inline-size: 100%;
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
line-height: var(--lh-caption);
color: var(--aiweb-hf-title, var(--aiweb-hf-glass-ink));
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-herofull__marquee .aiweb-price {
justify-content: center;
gap: var(--space-1);
}
.aiweb-herofull__marquee .aiweb-price__current {
color: var(--aiweb-hf-glass-ink);
}
.aiweb-herofull__marquee .aiweb-price__amount {
font-size: var(--fs-caption);
}
.aiweb-herofull__marquee .aiweb-price__unit,
.aiweb-herofull__marquee .aiweb-price__regular,
.aiweb-herofull__marquee .aiweb-price__out {
font-size: var(--fs-caption);
color: color-mix(in srgb, var(--aiweb-hf-glass-ink) 60%, var(--aiweb-hf-glass));
}
.aiweb-herofull__media {
inline-size: 52cqi;
margin-block-start: auto;
margin-inline: auto;
padding-block: var(--aiweb-hf-slider-pt-m, 0px) var(--aiweb-hf-slider-pb-m, 0px);
}
.aiweb-herofull__slider {
inline-size: 100%;
aspect-ratio: 3 / 4;
}
.aiweb-herofull__slide {
padding: var(--aiweb-hf-slider-frame, var(--space-2));
border-radius: var(--aiweb-hf-arch);
background-color: var(--aiweb-hf-slider-frame-color, var(--aiweb-hf-glass));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiweb-hf-glass-ink) 8%, transparent), var(--aiweb-hf-glass-shadow-hover);
}
.aiweb-herofull__slide-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: var(--aiweb-hf-arch-inner);
-webkit-user-select: none;
user-select: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.aiweb-herofull__chip,
.aiweb-herofull__marquee-card,
.aiweb-herofull__trust {
background-color: color-mix(in srgb, var(--aiweb-hf-glass) 46%, transparent);
-webkit-backdrop-filter: blur(var(--space-3)) saturate(140%);
backdrop-filter: blur(var(--space-3)) saturate(140%);
}
}
@media (min-width: 768px) {
.aiweb-herofull__overlay {
gap: 3cqi;
padding-block: 13.5cqi 4cqi;
}
.aiweb-herofull--left .aiweb-herofull__overlay {
padding-inline: 53cqi 5cqi;
}
.aiweb-herofull--right .aiweb-herofull__overlay {
padding-inline: 5cqi 53cqi;
}
.aiweb-herofull--center .aiweb-herofull__overlay {
padding-inline: 29cqi;
}
.aiweb-herofull__panel {
align-items: stretch;
gap: 1.8cqi;
inline-size: 36cqi;
text-align: start;
transform: translateY(var(--aiweb-hf-panel-y-d, 0px));
}
.aiweb-herofull--center .aiweb-herofull__panel {
text-align: center;
}
.aiweb-herofull__chips {
gap: 1cqi;
}
.aiweb-herofull__chips,
.aiweb-herofull__marquee,
.aiweb-herofull__trust {
inline-size: 40cqi;
}
.aiweb-herofull__marquee-item {
inline-size: calc(100cqi / 4);
}
.aiweb-herofull--left .aiweb-herofull__panel,
.aiweb-herofull--left .aiweb-herofull__chips,
.aiweb-herofull--left .aiweb-herofull__marquee,
.aiweb-herofull--left .aiweb-herofull__trust {
margin-inline-start: auto;
}
.aiweb-herofull--right .aiweb-herofull__panel,
.aiweb-herofull--right .aiweb-herofull__chips,
.aiweb-herofull--right .aiweb-herofull__marquee,
.aiweb-herofull--right .aiweb-herofull__trust {
margin-inline-end: auto;
}
.aiweb-herofull--center .aiweb-herofull__panel,
.aiweb-herofull--center .aiweb-herofull__chips,
.aiweb-herofull--center .aiweb-herofull__marquee,
.aiweb-herofull--center .aiweb-herofull__trust {
margin-inline: auto;
}
.aiweb-herofull__title {
font-size: max(var(--fs-h2), 3.3cqi);
}
.aiweb-herofull__rule-star .aiweb-icon {
inline-size: max(var(--space-4), 1.4cqi);
block-size: max(var(--space-4), 1.4cqi);
}
.aiweb-herofull__text {
font-size: max(var(--fs-body), 1.55cqi);
}
.aiweb-herofull__cta {
min-block-size: max(var(--space-12), 3.9cqi);
padding-inline: max(var(--space-6), 2.4cqi);
font-size: max(var(--fs-body), 1.45cqi);
}
.aiweb-herofull--left .aiweb-herofull__cta {
align-self: flex-end;
}
.aiweb-herofull--right .aiweb-herofull__cta {
align-self: flex-start;
}
.aiweb-herofull--center .aiweb-herofull__cta {
align-self: center;
}
.aiweb-herofull__cta-icon {
inline-size: max(var(--space-6), 2.5cqi);
block-size: max(var(--space-6), 2.5cqi);
}
.aiweb-herofull__cta-icon .aiweb-icon {
inline-size: max(var(--space-4), 1.5cqi);
block-size: max(var(--space-4), 1.5cqi);
}
.aiweb-herofull__trust-icon .aiweb-icon {
inline-size: max(var(--space-4), 1.2cqi);
block-size: max(var(--space-4), 1.2cqi);
}
.aiweb-herofull__foot {
gap: 1cqi;
transform: translateY(var(--aiweb-hf-foot-y-d, 0px));
}
.aiweb-herofull__chip {
gap: var(--space-2);
min-block-size: max(var(--space-12), 5cqi);
padding-inline: var(--space-2);
}
.aiweb-herofull__chip-label {
white-space: normal;
}
.aiweb-herofull__chip-media {
inline-size: max(var(--space-8), 3.4cqi);
block-size: max(var(--space-8), 3.4cqi);
}
.aiweb-herofull__chip-label {
font-size: max(var(--fs-caption), 1.35cqi);
}
.aiweb-herofull__trust-title {
font-size: max(var(--fs-caption), 1.05cqi);
}
.aiweb-herofull__trust-desc {
font-size: max(var(--fs-caption), .82cqi);
}
.aiweb-herofull__trust {
padding: .7cqi var(--space-2);
}
.aiweb-herofull__trust-item {
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-1);
text-align: start;
}
.aiweb-herofull--split .aiweb-herofull__overlay {
display: grid;
grid-template-columns: 1fr 30cqi;
grid-template-rows: auto auto;
align-content: center;
padding-block: 6cqi;
padding-inline: 6cqi;
}
.aiweb-herofull--split .aiweb-herofull__panel,
.aiweb-herofull--split .aiweb-herofull__foot {
grid-column: 1;
}
.aiweb-herofull--split .aiweb-herofull__media {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
inline-size: 100%;
margin: 0;
padding-block: var(--aiweb-hf-slider-pt-d, 0px) var(--aiweb-hf-slider-pb-d, 0px);
}
.aiweb-herofull--split .aiweb-herofull__panel,
.aiweb-herofull--split .aiweb-herofull__chips,
.aiweb-herofull--split .aiweb-herofull__marquee,
.aiweb-herofull--split .aiweb-herofull__trust {
inline-size: min(100%, 42cqi);
margin-inline: auto;
}
.aiweb-herofull--split .aiweb-herofull__panel {
align-items: center;
text-align: center;
}
.aiweb-herofull--split .aiweb-herofull__cta {
align-self: center;
}
}
@media (hover: hover) {
.aiweb-herofull__cta:hover,
.aiweb-herofull__chip:hover {
transform: translateY(calc(-1 * var(--space-1)));
}
.aiweb-herofull__marquee:hover .aiweb-herofull__marquee-track {
animation-play-state: paused;
}
.aiweb-herofull__marquee-card:hover {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiweb-hf-glass) 80%, transparent), var(--aiweb-hf-glass-shadow-hover);
}
.aiweb-herofull__cta:hover {
box-shadow: var(--aiweb-hf-glass-shadow-hover);
}
.aiweb-herofull__chip:hover {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aiweb-hf-glass) 80%, transparent), var(--aiweb-hf-glass-shadow-hover);
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-herofull__cta,
.aiweb-herofull__chip,
.aiweb-herofull__marquee-card {
transition: none;
}
.aiweb-herofull__cta:hover,
.aiweb-herofull__chip:hover {
transform: none;
}
.aiweb-herofull__marquee-track {
animation: none;
}
}
.aiweb-herofull__balls {
grid-area: 1 / 1;
position: relative;
overflow: hidden;
pointer-events: none;
}
.aiweb-herofull__ball {
position: absolute;
inline-size: min(var(--aiweb-hf-ball-px), 26cqi);
block-size: min(var(--aiweb-hf-ball-px), 26cqi);
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
pointer-events: auto;
will-change: transform;
}
.aiweb-herofull__ball:active {
cursor: grabbing;
}
.aiweb-herofull__ball--1 {
inset-inline-end: 4cqi;
inset-block-start: 8cqi;
}
.aiweb-herofull__ball--2 {
inset-inline-start: 6cqi;
inset-block-start: 34cqi;
}
.aiweb-herofull__ball-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
pointer-events: none;
}