.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-hsec {
display: contents;
}
.aiweb-hsec > .aiweb-home-section:first-child {
margin-block-start: var(--aiweb-sec-top, var(--space-10));
}
.aiweb-home > .aiweb-hsec:first-child > .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,
.aiweb-catban .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,
.aiweb-catban .aiweb-section-header__text {
display: contents;
}
.aiweb-categories .aiweb-section-header__title,
.aiweb-newest .aiweb-section-header__title,
.aiweb-articles .aiweb-section-header__title,
.aiweb-catban .aiweb-section-header__title {
order: 1;
}
.aiweb-categories .aiweb-section-header__link,
.aiweb-newest .aiweb-section-header__link,
.aiweb-articles .aiweb-section-header__link,
.aiweb-catban .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,
.aiweb-catban .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,
.aiweb-catban .aiweb-section-header__icon svg {
width: 20px;
height: 20px;
}
.aiweb-categories .aiweb-section-header:not(:has(.aiweb-section-header__link)) .aiweb-section-header__icon,
.aiweb-newest .aiweb-section-header:not(:has(.aiweb-section-header__link)) .aiweb-section-header__icon,
.aiweb-articles .aiweb-section-header:not(:has(.aiweb-section-header__link)) .aiweb-section-header__icon,
.aiweb-catban .aiweb-section-header:not(:has(.aiweb-section-header__link)) .aiweb-section-header__icon {
margin-inline-start: auto;
}
.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(--aiweb-catarch-pad, var(--space-2));
background-color: var(--aiweb-catarch-frame-bg, var(--surface));
border: var(--aiweb-catarch-bw, 1px) solid var(--aiweb-catarch-bc, 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(--aiweb-aboutsum-gap-m, var(--space-6));
}
.aiweb-aboutsum__content {
display: flex;
flex-direction: column;
gap: var(--aiweb-aboutsum-text-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 {
color: var(--aiweb-aboutsum-title-color, inherit);
font-size: var(--aiweb-aboutsum-title-fs, var(--fs-h2));
font-weight: var(--aiweb-aboutsum-title-fw, var(--fw-bold));
line-height: var(--lh-h2);
}
.aiweb-aboutsum__subtitle {
color: var(--text-secondary);
font-size: var(--aiweb-aboutsum-sub-fs, var(--fs-caption));
line-height: var(--lh-caption);
}
.aiweb-aboutsum__text {
color: var(--aiweb-aboutsum-text-color, var(--text-secondary));
font-size: var(--aiweb-aboutsum-text-fs, var(--fs-body));
font-weight: var(--aiweb-aboutsum-text-fw, inherit);
line-height: var(--aiweb-aboutsum-text-lh, var(--lh-body-lg));
text-align: var(--aiweb-aboutsum-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(--aiweb-aboutsum-stat-fs, var(--fs-h2));
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
}
.aiweb-aboutsum__stat-label {
color: var(--text-secondary);
font-size: var(--aiweb-aboutsum-statlabel-fs, 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;
justify-items: var(--aiweb-aboutsum-media-justify, stretch);
min-inline-size: 0;
padding: var(--aiweb-aboutsum-media-pad, 0);
}
.aiweb-aboutsum__picture {
display: block;
z-index: 1;
inline-size: 100%;
max-inline-size: var(--aiweb-aboutsum-media-max-m, 100%);
}
.aiweb-aboutsum__img {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--aiweb-aboutsum-media-radius, 0);
}
.aiweb-aboutsum--arch .aiweb-aboutsum__media::before {
content: "";
position: absolute;
inset-block: var(--space-4) 0;
inset-inline: var(--aiweb-aboutsum-arch-inset, 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, var(--aiweb-aboutsum-col-content, 1fr)) minmax(0, var(--aiweb-aboutsum-col-media, 1fr));
gap: var(--aiweb-aboutsum-gap, var(--space-8));
align-items: var(--aiweb-aboutsum-align, center);
}
.aiweb-aboutsum--media-first .aiweb-aboutsum__media {
order: 0;
}
.aiweb-aboutsum--media-right .aiweb-aboutsum__inner {
grid-template-columns: minmax(0, var(--aiweb-aboutsum-col-media, 1fr)) minmax(0, var(--aiweb-aboutsum-col-content, 1fr));
}
.aiweb-aboutsum--media-right .aiweb-aboutsum__media {
order: -1;
}
.aiweb-aboutsum__picture {
max-inline-size: var(--aiweb-aboutsum-media-max, 100%);
}
}
.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: flex;
gap: var(--space-4);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-inline-start: 0;
padding-block: var(--space-2);
}
.aiweb-proshow__grid::-webkit-scrollbar {
display: none;
}
.aiweb-proshow__grid .aiweb-proshow__card {
flex: 0 0 calc((100% - var(--aiweb-proshow-cols, 3) * var(--space-4)) / (var(--aiweb-proshow-cols, 3) + 0.2));
scroll-snap-align: start;
}
.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 .aiweb-proshow__card {
flex-basis: calc((100% - var(--aiweb-proshow-cols, 4) * var(--space-4)) / (var(--aiweb-proshow-cols, 4) + 0.2));
}
.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: flex;
gap: var(--space-4);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-inline-start: 0;
padding-block: var(--space-2);
}
.aiweb-propick__grid::-webkit-scrollbar {
display: none;
}
.aiweb-propick__grid .aiweb-propick__card {
flex: 0 0 calc((100% - var(--aiweb-propick-cols, 3) * var(--space-4)) / (var(--aiweb-propick-cols, 3) + 0.2));
scroll-snap-align: start;
}
.aiweb-propick__card {
padding: var(--space-4);
}
.aiweb-propick__all {
padding-inline: var(--space-5);
}
}
@media (min-width: 1024px) {
.aiweb-propick__grid .aiweb-propick__card {
flex-basis: calc((100% - var(--aiweb-propick-cols, 4) * var(--space-4)) / (var(--aiweb-propick-cols, 4) + 0.2));
}
.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-inline: 0;
margin-block: var(--aiweb-hf-title-mt, 0px) var(--aiweb-hf-title-mb, 0px);
font-family: var(--aiweb-hf-title-ff, inherit);
font-size: var(--aiweb-hf-title-fs-m, max(var(--fs-h3), 5.6cqi));
line-height: var(--lh-h1);
font-weight: var(--aiweb-hf-title-fw, 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-inline: 0;
margin-block: var(--aiweb-hf-text-mt, 0px) var(--aiweb-hf-text-mb, 0px);
font-family: var(--aiweb-hf-text-ff, inherit);
font-size: var(--aiweb-hf-text-fs-m, max(var(--fs-body), 3.2cqi));
line-height: var(--lh-body-lg);
font-weight: var(--aiweb-hf-text-fw, inherit);
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);
margin-block: var(--aiweb-hf-cta-mt, 0px) var(--aiweb-hf-cta-mb, 0px);
padding-inline: max(var(--space-5), 5cqi);
border-radius: var(--radius-pill);
font-family: var(--aiweb-hf-cta-ff, inherit);
font-size: var(--aiweb-hf-cta-fs-m, max(var(--fs-body), 3.2cqi));
font-weight: var(--aiweb-hf-cta-fw, var(--fw-bold));
color: var(--aiweb-hf-cta-ink, 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: var(--aiweb-hf-title-fs-d, 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: var(--aiweb-hf-text-fs-d, 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: var(--aiweb-hf-cta-fs-d, 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;
}
.aiweb-streamers {
--aiweb-streamers-ratio: 3 / 4;
}
.aiweb-streamers--ratio-9-16 {
--aiweb-streamers-ratio: 9 / 16;
}
.aiweb-streamers--ratio-1-1 {
--aiweb-streamers-ratio: 1 / 1;
}
.aiweb-streamers--ratio-4-3 {
--aiweb-streamers-ratio: 4 / 3;
}
.aiweb-streamers__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-5);
text-align: center;
}
.aiweb-streamers--start .aiweb-streamers__head {
align-items: flex-start;
text-align: start;
}
.aiweb-streamers__eyebrow {
display: inline-flex;
align-items: center;
padding-block: var(--space-1);
padding-inline: var(--space-3);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
color: var(--aiweb-streamers-accent, var(--color-primary-fg));
background-color: color-mix(in srgb, var(--aiweb-streamers-accent, var(--color-primary-fg)) 12%, transparent);
border-radius: var(--radius-pill);
}
.aiweb-streamers__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
}
.aiweb-streamers__title-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--aiweb-streamers-accent, var(--color-primary-fg));
}
.aiweb-streamers__subtitle {
max-inline-size: var(--reading-max);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
}
.aiweb-streamers__dots[hidden] {
display: none;
}
.aiweb-streamers__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0; 
margin-block-start: var(--space-4);
}
.aiweb-streamers--start .aiweb-streamers__dots {
justify-content: flex-start;
}
.aiweb-streamers__dot {
display: grid;
place-items: center;
inline-size: var(--space-10);
min-block-size: 44px; 
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.aiweb-streamers__dot::before {
content: "";
display: block;
inline-size: var(--space-2);
block-size: var(--space-2);
background-color: var(--border);
border-radius: var(--radius-pill);
transition: background-color var(--transition-base), inline-size var(--transition-base);
}
.aiweb-streamers__dot:hover::before {
background-color: var(--text-secondary);
}
.aiweb-streamers__dot.is-active::before {
inline-size: var(--space-6);
background-color: var(--aiweb-streamers-accent, var(--color-primary));
}
.aiweb-streamers__rail {
--aiweb-streamers-w: calc((100% - 2 * var(--space-3)) / 2.2);
min-block-size: var(--aiweb-streamers-reserve, auto);
align-items: center;
}
.aiweb-streamers__rail .aiweb-streamers__card {
flex: 0 0 var(--aiweb-streamers-w);
}
.aiweb-streamers__card {
position: relative;
}
.aiweb-streamers__frame {
position: relative;
display: block;
inline-size: 100%;
block-size: 100%;
overflow: hidden;
aspect-ratio: var(--aiweb-streamers-ratio);
background-image: linear-gradient(160deg, var(--color-primary-soft), var(--background));
border-radius: var(--radius-lg);
isolation: isolate;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.aiweb-streamers__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-streamers__initial {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-display);
font-weight: var(--fw-black);
line-height: 1;
color: var(--aiweb-streamers-card, var(--aiweb-streamers-accent, var(--color-primary-fg)));
opacity: .35;
}
.aiweb-streamers__shade {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 1;
block-size: 72%;
background-image: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 94%, transparent), color-mix(in srgb, var(--color-ink) 55%, transparent) 42%, transparent);
pointer-events: none;
}
.aiweb-streamers__live {
position: absolute;
z-index: 3;
inset-block-start: var(--space-2);
inset-inline-end: var(--space-2);
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-block: var(--space-1);
padding-inline: var(--space-2);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
line-height: var(--lh-caption);
color: var(--text-on-primary);
background-color: var(--color-discount);
border-radius: var(--radius-pill);
pointer-events: none;
}
.aiweb-streamers__live-dot {
inline-size: var(--space-2);
block-size: var(--space-2);
background-color: var(--text-on-primary);
border-radius: var(--radius-pill);
animation: aiweb-streamers-pulse 1.6s ease-in-out infinite;
}
@keyframes aiweb-streamers-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .35;
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-streamers__live-dot {
animation: none;
}
}
.aiweb-streamers__action {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--text-on-primary);
background-color: transparent;
border: 0;
cursor: pointer;
}
.aiweb-streamers__play {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--space-12);
block-size: var(--space-12);
color: var(--text-on-primary);
background-color: color-mix(in srgb, var(--aiweb-streamers-card, var(--aiweb-streamers-accent, var(--color-primary))) 88%, transparent);
border-radius: var(--radius-pill);
opacity: 0;
transform: scale(.85);
transition: opacity var(--transition-base), transform var(--transition-base);
}
@media (hover: none) {
.aiweb-streamers__play {
opacity: 1;
transform: none;
}
}
.aiweb-streamers__card:hover .aiweb-streamers__play,
.aiweb-streamers__action:focus-visible .aiweb-streamers__play {
opacity: 1;
transform: none;
}
.aiweb-streamers__action:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -4px;
}
.aiweb-streamers__meta {
position: absolute;
z-index: 3;
inset-inline: 0;
inset-block-end: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3);
color: var(--text-on-primary);
pointer-events: none;
}
.aiweb-streamers__name {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: var(--lh-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-streamers__role {
font-size: var(--fs-caption);
line-height: var(--lh-caption);
opacity: .78;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-streamers__stat {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--space-1);
margin-block-start: var(--space-1);
padding-block: var(--space-1);
padding-inline: var(--space-2);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
color: var(--text-on-primary);
background-color: color-mix(in srgb, var(--color-ink) 55%, transparent);
border: 1px solid color-mix(in srgb, var(--text-on-primary) 22%, transparent);
border-radius: var(--radius-pill);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
a.aiweb-streamers__stat {
pointer-events: auto;
}
.aiweb-streamers__stat-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--aiweb-streamers-card, var(--aiweb-streamers-accent, var(--color-primary-fg)));
}
.aiweb-streamers__card--feat .aiweb-streamers__frame {
box-shadow: 0 0 0 2px var(--aiweb-streamers-card, var(--aiweb-streamers-accent, var(--color-primary)));
}
.aiweb-streamers__card--feat .aiweb-streamers__play {
opacity: 1;
transform: none;
}
.aiweb-streamers__split {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.aiweb-streamers__aside-body {
display: flex;
align-items: stretch;
gap: var(--space-3);
}
.aiweb-streamers__products {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
}
.aiweb-streamers__vnav[hidden] {
display: none;
}
.aiweb-streamers__vnav {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.aiweb-streamers__vnav-arrow {
display: grid;
place-items: center;
inline-size: var(--space-8);
block-size: var(--space-8);
min-block-size: 44px; 
padding: 0;
color: var(--text-primary);
background: none;
border: 0;
cursor: pointer;
transition: color var(--transition-base), opacity var(--transition-base);
}
.aiweb-streamers__vnav-arrow:not(:disabled):hover {
color: var(--aiweb-streamers-accent, var(--color-primary-fg));
}
.aiweb-streamers__vnav-arrow:disabled {
opacity: .3;
cursor: default;
}
.aiweb-streamers__vnav-dots {
display: flex;
flex-direction: column;
align-items: center;
gap: 0; 
}
.aiweb-streamers__vnav-dots .aiweb-streamers__dot {
inline-size: var(--space-8);
min-block-size: var(--space-6);
}
.aiweb-streamers__vnav-dots .aiweb-streamers__dot.is-active::before {
inline-size: var(--space-2);
block-size: var(--space-6);
}
.aiweb-streamers--band-soft > .aiweb-app {
padding-block: var(--space-8);
background-color: var(--background);
border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
.aiweb-streamers__rail {
--aiweb-streamers-w: calc((100% - var(--aiweb-streamers-cols, 5) * var(--space-4)) / (var(--aiweb-streamers-cols, 5) + 0.2));
gap: var(--space-4);
scroll-padding-inline-start: 0;
}
.aiweb-streamers__card:hover .aiweb-streamers__frame {
transform: translateY(-4px);
}
.aiweb-streamers__rail .aiweb-streamers__card {
transition: flex-basis var(--transition-base);
}
.aiweb-streamers__rail .aiweb-streamers__card--feat {
flex-basis: calc(var(--aiweb-streamers-w) * 1.32);
}
.aiweb-streamers__card--feat .aiweb-streamers__name {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
.aiweb-streamers__card--feat .aiweb-streamers__meta {
padding: var(--space-5);
}
.aiweb-streamers__name {
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
}
.aiweb-streamers__meta {
padding: var(--space-4);
}
}
@media (min-width: 768px) {
.aiweb-streamers__products {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.aiweb-streamers--split .aiweb-streamers__split {
display: grid;
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
gap: var(--space-8); 
align-items: start;
}
.aiweb-streamers--split .aiweb-streamers__aside {
grid-column: 1;
grid-row: 1;
}
.aiweb-streamers--split .aiweb-streamers__main {
grid-column: 2;
grid-row: 1;
min-inline-size: 0;
}
.aiweb-streamers--split .aiweb-streamers__rail {
--aiweb-streamers-w: calc((100% - 2 * var(--space-4)) / 3.32);
}
.aiweb-streamers--split .aiweb-streamers__products {
grid-template-columns: minmax(0, 1fr);
max-block-size: var(--aiweb-streamers-reserve, 26rem);
overflow-y: auto;
overscroll-behavior: contain;
scroll-snap-type: y proximity;
scrollbar-width: none;
}
.aiweb-streamers--split .aiweb-streamers__products::-webkit-scrollbar {
display: none;
}
.aiweb-streamers--split .aiweb-streamers__products > * {
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-streamers__frame,
.aiweb-streamers__play,
.aiweb-streamers__dot::before,
.aiweb-streamers__rail .aiweb-streamers__card {
transition: none;
}
.aiweb-streamers__card:hover .aiweb-streamers__frame {
transform: none;
}
}
.aiweb-herogame {
--aiweb-hg-fill: var(--aiweb-hg-accent, var(--hg-accent));
--aiweb-hg-fill-2: var(--aiweb-hg-accent, var(--hg-accent-dark));
--aiweb-hg-ink: var(--aiweb-hg-accent, var(--hg-accent-ink));
--aiweb-hg-on-fill: var(--hg-accent-fg);
--aiweb-hg-fade: 58%;
position: relative;
overflow: clip;
background-color: var(--background);
padding-block: var(--space-10);
min-block-size: var(--aiweb-hg-minh-m, auto);
}
.aiweb-herogame--glow::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(60% 70% at 22% 30%, color-mix(in srgb, var(--aiweb-hg-fill) 26%, transparent), transparent 70%),
radial-gradient(45% 55% at 85% 85%, color-mix(in srgb, var(--aiweb-hg-fill) 14%, transparent), transparent 72%);
-webkit-mask-image: linear-gradient(to bottom, #000 var(--aiweb-hg-fade), transparent 100%);
mask-image: linear-gradient(to bottom, #000 var(--aiweb-hg-fade), transparent 100%);
}
:root[data-theme="dark"] .aiweb-herogame--glow::before {
background:
radial-gradient(60% 70% at 22% 30%, color-mix(in srgb, var(--aiweb-hg-fill) 38%, transparent), transparent 70%),
radial-gradient(45% 55% at 85% 85%, color-mix(in srgb, var(--aiweb-hg-fill) 20%, transparent), transparent 72%);
}
.aiweb-herogame--glow.aiweb-herogame--pulse::before {
animation: aiweb-hg-glow-pulse var(--aiweb-hg-pulse-dur, 6s) ease-in-out infinite;
}
@keyframes aiweb-hg-glow-pulse {
0%,
100% {
opacity: var(--aiweb-hg-pulse-min, .55);
}
50% {
opacity: 1;
}
}
.aiweb-herogame__stage {
position: relative;
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-4);
display: grid;
gap: var(--space-8);
align-items: center;
container-type: inline-size;
}
.aiweb-herogame__media {
position: relative;
padding: var(--space-5);
}
.aiweb-herogame__picture {
display: block;
}
.aiweb-herogame__img {
display: block;
inline-size: 100%;
block-size: auto;
}
.aiweb-herogame__badges {
list-style: none;
margin: 0;
padding: 0;
}
.aiweb-herogame__badge {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
background-color: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
max-inline-size: 60cqi;
}
.aiweb-herogame__badge-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--aiweb-hg-ink);
}
.aiweb-herogame__badge-body {
display: flex;
flex-direction: column;
min-inline-size: 0;
line-height: var(--lh-caption);
}
.aiweb-herogame__badge-value {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-herogame__badge-label {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-herogame__badge--pos-ts { inset-block-start: 6%;  inset-inline-start: 0; }
.aiweb-herogame__badge--pos-te { inset-block-start: 6%;  inset-inline-end: 0; }
.aiweb-herogame__badge--pos-ms { inset-block-start: 44%; inset-inline-start: 0; }
.aiweb-herogame__badge--pos-me { inset-block-start: 44%; inset-inline-end: 0; }
.aiweb-herogame__badge--pos-bs { inset-block-end: 6%;    inset-inline-start: 0; }
.aiweb-herogame__badge--pos-be { inset-block-end: 6%;    inset-inline-end: 0; }
.aiweb-herogame__badge:not([class*="--pos-"]):nth-child(1) { inset-block-start: 4%;  inset-inline-end: 0; }
.aiweb-herogame__badge:not([class*="--pos-"]):nth-child(2) { inset-block-start: 40%; inset-inline-start: 0; }
.aiweb-herogame__badge:not([class*="--pos-"]):nth-child(3) { inset-block-end: 6%;    inset-inline-end: 4%; }
.aiweb-herogame__badge:not([class*="--pos-"]):nth-child(n+4) { inset-block-end: 6%;  inset-inline-start: 0; }
.aiweb-herogame--badgefloat .aiweb-herogame__badge {
animation: aiweb-hg-badge-float var(--aiweb-hg-float-dur, 6s) ease-in-out infinite;
}
.aiweb-herogame--badgefloat .aiweb-herogame__badge:nth-child(2) {
animation-duration: calc(var(--aiweb-hg-float-dur, 6s) * 1.18);
animation-delay: calc(var(--aiweb-hg-float-dur, 6s) * -0.36);
}
.aiweb-herogame--badgefloat .aiweb-herogame__badge:nth-child(3) {
animation-duration: calc(var(--aiweb-hg-float-dur, 6s) * 0.86);
animation-delay: calc(var(--aiweb-hg-float-dur, 6s) * -0.68);
}
.aiweb-herogame--badgefloat .aiweb-herogame__badge:nth-child(n+4) {
animation-duration: calc(var(--aiweb-hg-float-dur, 6s) * 1.07);
animation-delay: calc(var(--aiweb-hg-float-dur, 6s) * -0.18);
}
@keyframes aiweb-hg-badge-float {
0% {
transform: translate3d(0, calc(var(--aiweb-hg-float-dist, 10px) * -0.5), 0);
}
33% {
transform: translate3d(calc(var(--aiweb-hg-float-dist, 10px) * 0.22), calc(var(--aiweb-hg-float-dist, 10px) * 0.16), 0);
}
66% {
transform: translate3d(calc(var(--aiweb-hg-float-dist, 10px) * -0.2), calc(var(--aiweb-hg-float-dist, 10px) * 0.5), 0);
}
100% {
transform: translate3d(0, calc(var(--aiweb-hg-float-dist, 10px) * -0.5), 0);
}
}
.aiweb-herogame__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
.aiweb-herogame__eyebrow {
margin: 0;
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--aiweb-hg-eyebrow, var(--aiweb-hg-ink));
}
.aiweb-herogame__title {
margin: 0;
font-size: var(--fs-display);
line-height: var(--lh-display);
font-weight: var(--fw-black);
color: var(--aiweb-hg-title, var(--text-primary));
}
.aiweb-herogame__title-accent {
display: block;
color: var(--aiweb-hg-ink);
}
.aiweb-herogame__text {
margin: 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
color: var(--aiweb-hg-text, var(--text-secondary));
max-inline-size: 52ch;
margin-inline: auto;
}
.aiweb-herogame__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.aiweb-herogame__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: 44px;
padding-inline: var(--space-6);
border-radius: var(--radius-pill);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
text-decoration: none;
transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.aiweb-herogame__cta--primary {
color: var(--aiweb-hg-on-fill);
background-image: linear-gradient(135deg, var(--aiweb-hg-fill), var(--aiweb-hg-fill-2));
box-shadow: var(--shadow-card);
}
.aiweb-herogame__cta--ghost {
color: var(--aiweb-hg-title, var(--text-primary));
border: 1px solid var(--border);
background-color: transparent;
}
@media (hover: hover) {
.aiweb-herogame__cta:hover {
transform: translateY(-2px);
}
.aiweb-herogame__cta--primary:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-herogame__cta--ghost:hover {
border-color: var(--aiweb-hg-ink);
color: var(--aiweb-hg-ink);
}
}
.aiweb-herogame__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) var(--space-6);
margin-block-start: var(--space-2);
}
.aiweb-herogame__feature {
display: flex;
align-items: center;
gap: var(--space-2);
text-align: start;
}
.aiweb-herogame__feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-sm);
color: var(--aiweb-hg-ink);
background-color: color-mix(in srgb, var(--aiweb-hg-fill) 12%, transparent);
}
.aiweb-herogame__feature-body {
display: flex;
flex-direction: column;
line-height: var(--lh-caption);
}
.aiweb-herogame__feature-title {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--aiweb-hg-title, var(--text-primary));
}
.aiweb-herogame__feature-desc {
font-size: var(--fs-caption);
color: var(--aiweb-hg-text, var(--text-secondary));
}
@media (min-width: 768px) {
.aiweb-herogame {
padding-block: var(--space-16);
min-block-size: var(--aiweb-hg-minh-d, auto);
}
.aiweb-herogame__stage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-10);
padding-inline: var(--space-6);
}
.aiweb-herogame__content {
grid-column: 1;
grid-row: 1;
text-align: start;
}
.aiweb-herogame__media {
grid-column: 2;
grid-row: 1;
}
.aiweb-herogame__text {
margin-inline: 0;
}
.aiweb-herogame__actions,
.aiweb-herogame__features {
justify-content: flex-start;
}
.aiweb-herogame--textonly .aiweb-herogame__stage {
grid-template-columns: minmax(0, 1fr);
}
.aiweb-herogame--textonly .aiweb-herogame__content {
grid-column: 1;
text-align: center;
}
.aiweb-herogame--textonly .aiweb-herogame__text {
margin-inline: auto;
}
.aiweb-herogame--textonly .aiweb-herogame__actions,
.aiweb-herogame--textonly .aiweb-herogame__features {
justify-content: center;
}
}
@media (min-width: 1024px) {
.aiweb-herogame__stage {
gap: var(--space-12);
}
.aiweb-herogame__content {
gap: var(--space-5);
}
.aiweb-herogame__features {
gap: var(--space-5) var(--space-8);
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-herogame__cta {
transition: none;
}
.aiweb-herogame__cta:hover {
transform: none;
}
.aiweb-herogame--glow.aiweb-herogame--pulse::before {
animation: none;
}
.aiweb-herogame--badgefloat .aiweb-herogame__badge {
animation: none;
}
}
.aiweb-catduo__stage {
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-4);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.aiweb-catduo__panel {
--aiweb-cd-canvas: var(--aiweb-cd-bg, var(--color-primary-soft));
--aiweb-cd-ink: var(--aiweb-cd-accent, var(--color-primary-fg));
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: stretch;
overflow: clip;
border-radius: var(--aiweb-cd-radius, var(--radius-lg));
background-color: var(--aiweb-cd-canvas);
background-image: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 65%, transparent), transparent 62%);
box-shadow: var(--shadow-card);
min-block-size: var(--aiweb-cd-minh-m, calc(4 * var(--space-10)));
}
.aiweb-catduo__content {
grid-column: 1;
grid-row: 1;
}
.aiweb-catduo__media {
grid-column: 2;
grid-row: 1;
}
.aiweb-catduo__panel--flip {
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.aiweb-catduo__panel--flip .aiweb-catduo__content {
grid-column: 2;
}
.aiweb-catduo__panel--flip .aiweb-catduo__media {
grid-column: 1;
}
.aiweb-catduo__panel--textonly {
grid-template-columns: minmax(0, 1fr);
}
.aiweb-catduo__panel--textonly .aiweb-catduo__content,
.aiweb-catduo__panel--textonly.aiweb-catduo__panel--flip .aiweb-catduo__content {
grid-column: 1;
}
.aiweb-catduo__content {
container-type: inline-size;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-2);
padding-block: var(--space-5);
padding-inline: var(--space-5) var(--space-3);
min-inline-size: 0;
}
.aiweb-catduo__panel--flip .aiweb-catduo__content {
padding-inline: var(--space-3) var(--space-5);
}
.aiweb-catduo__spark {
display: inline-flex;
color: color-mix(in srgb, var(--aiweb-cd-ink) 70%, transparent);
}
.aiweb-catduo__eyebrow {
margin: 0;
font-size: var(--aiweb-cd-eyebrow-fs-m, clamp(var(--fs-caption), 4.5cqi, var(--fs-body)));
line-height: var(--lh-caption);
font-weight: var(--aiweb-cd-eyebrow-fw, var(--fw-medium));
color: var(--aiweb-cd-text, var(--text-secondary));
}
.aiweb-catduo__title {
margin: 0;
font-size: var(--aiweb-cd-title-fs-m, clamp(var(--fs-body-lg), 11cqi, var(--fs-h1)));
line-height: var(--lh-h1);
font-weight: var(--aiweb-cd-title-fw, var(--fw-black));
color: var(--aiweb-cd-title, var(--text-primary));
}
.aiweb-catduo__title-accent {
color: var(--aiweb-cd-ink);
}
.aiweb-catduo--titlebreak .aiweb-catduo__title-accent {
display: block;
}
.aiweb-catduo__text {
margin: 0;
font-size: var(--aiweb-cd-text-fs-m, clamp(var(--fs-caption), 4.2cqi, var(--fs-body)));
line-height: var(--lh-body);
font-weight: var(--aiweb-cd-text-fw, var(--fw-regular));
color: var(--aiweb-cd-text, var(--text-secondary));
}
.aiweb-catduo__rule {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block: var(--space-1);
color: color-mix(in srgb, var(--aiweb-cd-ink) 45%, transparent);
}
.aiweb-catduo__rule::before,
.aiweb-catduo__rule::after {
content: "";
flex: 1 1 0;
border-block-start: 1px dashed currentColor;
}
.aiweb-catduo__rule-mark {
display: inline-flex;
flex: 0 0 auto;
}
.aiweb-catduo__cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 44px;
max-inline-size: 100%;
padding-inline: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
background-color: color-mix(in srgb, var(--aiweb-cd-ink) 14%, var(--surface));
color: var(--aiweb-cd-ink);
font-size: var(--aiweb-cd-cta-fs-m, clamp(var(--fs-caption), 4.2cqi, var(--fs-body)));
font-weight: var(--aiweb-cd-cta-fw, var(--fw-semibold));
text-decoration: none;
transition: background-color var(--transition-base), transform var(--transition-base);
}
.aiweb-catduo__cta:hover {
background-color: color-mix(in srgb, var(--aiweb-cd-ink) 24%, var(--surface));
transform: translateY(-1px);
}
.aiweb-catduo__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: var(--space-8);
block-size: var(--space-8);
border-radius: var(--radius-pill);
background-color: var(--aiweb-cd-ink);
color: var(--surface);
}
.aiweb-catduo__cta-label {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-catduo--btn-stretch .aiweb-catduo__cta {
align-self: stretch;
}
.aiweb-catduo--btn-stretch .aiweb-catduo__chip {
flex: 1 1 0;
min-inline-size: var(--space-16);
}
.aiweb-catduo--btn-start .aiweb-catduo__chip {
flex: 0 0 auto;
}
.aiweb-catduo__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.aiweb-catduo__chip {
display: flex;
min-inline-size: 0;
}
.aiweb-catduo__chip-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
inline-size: 100%;
min-inline-size: 0;
min-block-size: 44px;
padding-inline: var(--space-2);
border-radius: var(--radius-pill);
background-color: color-mix(in srgb, var(--aiweb-cd-ink) 14%, var(--surface));
color: var(--aiweb-cd-ink);
text-decoration: none;
transition: background-color var(--transition-base);
}
a.aiweb-catduo__chip-inner:hover {
background-color: color-mix(in srgb, var(--aiweb-cd-ink) 24%, var(--surface));
}
.aiweb-catduo__dot {
--aiweb-cd-dot: clamp(var(--space-3), 9cqi, var(--space-4));
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--aiweb-cd-dot);
block-size: var(--aiweb-cd-dot);
border-radius: var(--radius-pill);
overflow: clip;
color: var(--aiweb-cd-ink);
}
.aiweb-catduo__dot--color {
background-color: var(--aiweb-cd-swatch, transparent);
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
}
.aiweb-catduo__dot--icon {
border: 1px solid color-mix(in srgb, var(--aiweb-cd-ink) 45%, transparent);
}
.aiweb-catduo__dot-img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-catduo__dot--plain {
display: none;
}
.aiweb-catduo__chip-label {
font-size: var(--aiweb-cd-chip-fs-m, clamp(var(--fs-caption), 3.8cqi, var(--fs-body)));
line-height: var(--lh-caption);
font-weight: var(--aiweb-cd-chip-fw, var(--fw-regular));
color: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aiweb-catduo__media {
position: relative;
min-inline-size: 0;
overflow: clip;
}
.aiweb-catduo--shape-arc .aiweb-catduo__media {
border-start-start-radius: var(--aiweb-cd-curve-t, var(--aiweb-cd-curve, var(--space-16))) 50%;
border-end-start-radius: var(--aiweb-cd-curve-b, var(--aiweb-cd-curve, var(--space-16))) 50%;
}
.aiweb-catduo--shape-arc .aiweb-catduo__panel--flip .aiweb-catduo__media {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: var(--aiweb-cd-curve-t, var(--aiweb-cd-curve, var(--space-16))) 50%;
border-end-end-radius: var(--aiweb-cd-curve-b, var(--aiweb-cd-curve, var(--space-16))) 50%;
}
.aiweb-catduo--shape-round .aiweb-catduo__media {
margin: var(--space-3);
border-radius: var(--aiweb-cd-curve, var(--radius-md));
}
.aiweb-catduo__picture {
position: absolute;
inset: 0;
display: block;
}
.aiweb-catduo__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
@media (min-width: 768px) {
.aiweb-catduo__stage {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.aiweb-catduo__panel {
min-block-size: var(--aiweb-cd-minh-d, calc(5 * var(--space-12)));
}
.aiweb-catduo__content {
gap: var(--space-3);
padding-block: var(--space-8);
padding-inline: var(--space-8) var(--space-4);
}
.aiweb-catduo__panel--flip .aiweb-catduo__content {
padding-inline: var(--space-4) var(--space-8);
}
.aiweb-catduo__eyebrow {
font-size: var(--aiweb-cd-eyebrow-fs, clamp(var(--fs-caption), 4.5cqi, var(--fs-body)));
}
.aiweb-catduo__title {
font-size: var(--aiweb-cd-title-fs, clamp(var(--fs-body-lg), 11cqi, var(--fs-h1)));
}
.aiweb-catduo__text {
font-size: var(--aiweb-cd-text-fs, clamp(var(--fs-caption), 4.2cqi, var(--fs-body)));
}
.aiweb-catduo__cta {
font-size: var(--aiweb-cd-cta-fs, clamp(var(--fs-caption), 4.2cqi, var(--fs-body)));
}
.aiweb-catduo__chip-label {
font-size: var(--aiweb-cd-chip-fs, clamp(var(--fs-caption), 3.8cqi, var(--fs-body)));
}
}
@media (min-width: 1024px) {
.aiweb-catduo__stage {
gap: var(--space-6);
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-catduo__cta {
transition: none;
}
.aiweb-catduo__cta:hover {
transform: none;
}
}
.aiweb-catban__rail {
--aiweb-cb-gap: var(--space-3);
gap: var(--aiweb-cb-gap);
align-items: stretch;
}
.aiweb-catban__card {
display: block;
flex: 0 0 calc((100% - var(--aiweb-cb-gap) * var(--aiweb-cb-gaps-m, 1)) / var(--aiweb-cb-pv-m, 1.6));
border-radius: var(--aiweb-cb-radius, var(--radius-md));
container-type: inline-size;
}
.aiweb-catban__frame {
position: relative;
display: flex;
aspect-ratio: var(--aiweb-cb-ar, 2 / 1);
overflow: hidden;
border-radius: inherit;
}
.aiweb-catban__frame:not(:has(.aiweb-catban__img)) {
background-color: var(--color-ink);
}
.aiweb-catban__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.aiweb-catban__beam {
position: absolute;
inset: 0;
background-image: linear-gradient(
118deg,
transparent 40%,
color-mix(in srgb, var(--aiweb-cb-accent, var(--color-primary)) 70%, transparent) 45%,
color-mix(in srgb, var(--aiweb-cb-accent, var(--color-primary)) 18%, transparent) 47%,
transparent 55%
);
}
.aiweb-catban__body {
position: relative;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
gap: var(--space-2);
inline-size: var(--aiweb-cb-body, 70%);
padding: var(--space-3);
color: var(--text-on-primary);
text-align: start;
}
.aiweb-catban__heading {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-catban__lead {
font-size: clamp(var(--fs-caption), 6cqi, var(--fs-h2));
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
text-shadow: 0 1px var(--space-1) var(--color-overlay);
}
.aiweb-catban__title {
font-size: clamp(var(--fs-body), 8.4cqi, var(--fs-h1));
font-weight: var(--fw-black);
line-height: var(--lh-h2);
text-shadow: 0 1px var(--space-1) var(--color-overlay);
}
.aiweb-catban__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: var(--space-1);
padding-inline: var(--space-3);
font-size: clamp(var(--fs-caption), 3.8cqi, var(--fs-body));
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
color: var(--aiweb-cb-cta-fg, var(--text-on-primary));
background-color: var(--aiweb-cb-accent, var(--color-primary));
border-radius: var(--radius-sm);
white-space: nowrap;
}
.aiweb-catban__arrow {
position: absolute;
inset-block-end: var(--space-3);
inset-inline-end: var(--space-3);
display: grid;
place-items: center;
inline-size: var(--space-8);
block-size: var(--space-8);
color: var(--aiweb-cb-accent, var(--color-primary));
background-color: color-mix(in srgb, var(--color-ink) 52%, transparent);
border: 1px dashed currentColor;
border-radius: var(--radius-pill);
transition: color var(--transition-base), background-color var(--transition-base);
}
.aiweb-catban__arrow svg {
transform: rotate(-45deg);
}
@media (hover: hover) {
.aiweb-catban__card:hover .aiweb-catban__img,
.aiweb-catban__card:focus-visible .aiweb-catban__img {
transform: scale(1.05);
}
.aiweb-catban__card:hover .aiweb-catban__arrow,
.aiweb-catban__card:focus-visible .aiweb-catban__arrow {
color: var(--aiweb-cb-cta-fg, var(--text-on-primary));
background-color: var(--aiweb-cb-accent, var(--color-primary));
}
}
@media (min-width: 768px) {
.aiweb-catban__rail {
--aiweb-cb-gap: var(--space-4);
}
.aiweb-catban__card {
flex-basis: calc((100% - var(--aiweb-cb-gap) * 2) / 2.6);
}
.aiweb-catban__body {
--aiweb-cb-body: 62%;
padding: var(--space-5);
}
.aiweb-catban__arrow {
inset-block-end: var(--space-4);
inset-inline-end: var(--space-4);
}
}
@media (min-width: 1024px) {
.aiweb-catban__card {
flex-basis: calc((100% - var(--aiweb-cb-gap) * var(--aiweb-cb-gaps-d, 3)) / var(--aiweb-cb-pv-d, 4));
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-catban__img {
transition: none;
}
.aiweb-catban__card:hover .aiweb-catban__img,
.aiweb-catban__card:focus-visible .aiweb-catban__img {
transform: none;
}
}