/* ================================================================
ASCEND V4.0 — Premium Brand Experience
Gymshark · Vanquish · Represent · Nike editorial aesthetic
Minimal · Luxury · Aggressive · Confident
Black · White · Signature Red (emphasis only)
Phases 1-4 Complete · Award-level refinement
Target: ~2400-2800 lines
================================================================ */
/* ----------------------------------------------------------------
01 — DESIGN TOKENS
---------------------------------------------------------------- */
:root {
/* Spacing — generous, luxury feel */
--a-2xs: 0.25rem;
--a-xs: 0.5rem;
--a-sm: 0.75rem;
--a-md: 1rem;
--a-lg: 1.5rem;
--a-xl: 2rem;
--a-2xl: 3rem;
--a-3xl: 4rem;
--a-4xl: 6rem;
--a-5xl: 8rem;
--a-6xl: 10rem;
/* Typography — premium hierarchy */
--a-fz-hero: clamp(2.75rem, 7.5vw, 5.5rem);
--a-fz-hero-sub: clamp(0.9375rem, 1.8vw, 1.125rem);
--a-fz-display: clamp(2rem, 5.5vw, 4rem);
--a-fz-section: clamp(1.5rem, 3vw, 2.25rem);
--a-fz-body: clamp(0.9375rem, 1.2vw, 1.0625rem);
--a-fz-sm: 0.875rem;
--a-fz-xs: 0.75rem;
--a-fz-2xs: 0.6875rem;
/* Radii */
--a-r-xs: 4px;
--a-r-sm: 6px;
--a-r-md: 10px;
--a-r-lg: 14px;
--a-r-xl: 20px;
--a-r-2xl: 28px;
--a-r-full: 9999px;
/* Brand Colors — Black · White · Red (emphasis only) */
--a-red: #DC2626;
--a-red-hover: #B91C1C;
--a-red-glow: rgba(220, 38, 38, 0.35);
--a-red-subtle: rgba(220, 38, 38, 0.08);
--a-red-soft: rgba(220, 38, 38, 0.12);
--a-red-accent: rgba(220, 38, 38, 0.2);
--a-shadow-red-sm: 0 0 40px rgba(220, 38, 38, 0.05);
--a-shadow-red-md: 0 0 50px rgba(220, 38, 38, 0.1);
--a-green: #16a34a;
--a-shadow-red-lg: 0 0 60px rgba(220, 38, 38, 0.12);
--a-glass: rgba(255, 255, 255, 0.04);
--a-glass-border: rgba(255, 255, 255, 0.08);
--a-glass-hover: rgba(255, 255, 255, 0.07);
--a-glass-active: rgba(255, 255, 255, 0.1);
--a-glass-subtle: rgba(255, 255, 255, 0.06);
--a-glass-faint: rgba(255, 255, 255, 0.05);
--a-glass-strong: rgba(255, 255, 255, 0.12);
--a-glass-interactive: rgba(255, 255, 255, 0.14);
/* Motion — unified animation language */
--a-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--a-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--a-ease-snap: cubic-bezier(0.19, 1, 0.22, 1);
--a-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--a-dur-fast: 150ms;
--a-dur: 300ms;
--a-dur-slow: 500ms;
--a-dur-slower: 700ms;
--a-dur-cinematic: 1000ms;
/* Elevation */
--a-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--a-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
--a-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
--a-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
--a-shadow-glow: 0 0 40px var(--a-red-glow);
--a-shadow-glow-sm: 0 0 20px var(--a-red-glow);
--a-shadow-glow-soft: 0 0 80px rgba(220, 38, 38, 0.15);
/* Layout */
--a-max-w: 1200px;
--a-header-h: 64px;
/* Utilities */
--muted-foreground: rgba(255, 255, 255, 0.55);
}
/* ----------------------------------------------------------------
02 — RESET & ACCESSIBILITY
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
:focus-visible {
outline: 2px solid var(--a-red);
outline-offset: 2px;
border-radius: var(--a-r-xs);
}
:focus:not(:focus-visible) { outline: none; }
img, video { max-width: 100%; height: auto; display: block; }
button {
cursor: pointer;
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
::selection {
background: var(--a-red);
color: #fff;
}
/* ----------------------------------------------------------------
03 — TYPOGRAPHY
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
line-height: 1.15;
}
p { text-wrap: pretty; }
/* ----------------------------------------------------------------
04 — LAYOUT
---------------------------------------------------------------- */
.theme-container {
width: 100%;
max-width: var(--a-max-w);
margin-inline: auto;
}
section { position: relative; }
@media (min-width: 768px) {
section { overflow: hidden; }
}
/* ----------------------------------------------------------------
05 — UTILITIES & REVEAL SYSTEM
---------------------------------------------------------------- */
.reveal-stagger > * {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--a-dur-slow) var(--a-ease-out),
transform var(--a-dur-slow) var(--a-ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-scale {
opacity: 0;
transform: scale(0.96);
transition: opacity var(--a-dur-slow) var(--a-ease-out),
transform var(--a-dur-slow) var(--a-ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: none; }
/* ----------------------------------------------------------------
06 — HEADER
---------------------------------------------------------------- */
header {
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
background: rgba(0, 0, 0, 0.82) !important;
transition: background var(--a-dur) var(--a-ease),
border-color var(--a-dur) var(--a-ease),
box-shadow var(--a-dur) var(--a-ease);
}
header img[alt="ascend"],
header img[alt="ascend logo"] {
height: 32px;
width: auto;
object-fit: contain;
transition: opacity var(--a-dur-fast) var(--a-ease),
filter var(--a-dur-fast) var(--a-ease);
}
@media (min-width: 768px) {
header img[alt="ascend"],
header img[alt="ascend logo"] {
height: 38px;
}
}
@media (hover: hover) and (pointer: fine) {
header img[alt="ascend"]:hover,
header img[alt="ascend logo"]:hover {
opacity: 0.85;
filter: brightness(1.1);
}
}
#mobile-drawer { scrollbar-width: none; }
#mobile-drawer::-webkit-scrollbar { display: none; }
header .flex.items-center button,
header .flex.items-center a {
transition: opacity var(--a-dur-fast) var(--a-ease),
transform var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
header .flex.items-center button:hover,
header .flex.items-center a:hover {
opacity: 0.75;
transform: translateY(-1px);
}
header .flex.items-center button:active,
header .flex.items-center a:active {
transform: translateY(0) scale(0.96);
opacity: 0.6;
}
}
header [data-cart-badge] { font-variant-numeric: tabular-nums; }
header button[onclick*="zidOpenRegionSettingDialog"],
header button[onclick*="region"] {
font-size: var(--a-fz-xs);
opacity: 0.8;
transition: opacity var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
header button[onclick*="zidOpenRegionSettingDialog"]:hover,
header button[onclick*="region"]:hover {
opacity: 1;
}
}
header a[href*="cart"] {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Cart badge pulse */
header [data-cart-badge][data-count]:not([data-count="0"]) {
animation: badgePulse 400ms var(--a-ease-out);
}
@keyframes badgePulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* ----------------------------------------------------------------
07 — HERO (V11: premium wide banner, 55vh desktop / 45vh mobile)
Section: section-id="38874995-69ae-4eca-ba54-4e029d75d56a"
---------------------------------------------------------------- */
.section-carousel[data-variant="default"] {
min-height: 55vh;
display: flex;
flex-direction: column;
}
.section-carousel[data-variant="default"] .embla {
flex: 1;
display: flex;
flex-direction: column;
}
.section-carousel[data-variant="default"] .embla__container { flex: 1; }
.section-carousel[data-variant="default"] .embla__slide {
display: flex;
align-items: center;
justify-content: center;
min-height: 55vh;
}
.section-carousel[data-variant="default"] .embla__slide picture {
position: absolute;
inset: 0;
}
.section-carousel[data-variant="default"] .embla__slide picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Ken Burns slow zoom */
@media (hover: hover) and (pointer: fine) {
.section-carousel[data-variant="default"] .embla__slide picture img {
transform: scale(1.03);
transition: transform 12s var(--a-ease);
}
}
/* Cinematic vignette overlay */
.section-carousel[data-variant="default"] .embla__slide::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.05) 35%,
rgba(0, 0, 0, 0.1) 65%,
rgba(0, 0, 0, 0.6) 100%
);
pointer-events: none;
z-index: 1;
}
/* Hero typography — stacked, premium hierarchy */
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide .text-xs {
font-size: var(--a-fz-xs);
letter-spacing: 0.4em;
font-weight: 500;
opacity: 0.65;
margin-bottom: var(--a-lg);
text-transform: uppercase;
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: var(--a-fz-hero);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.02;
margin-bottom: var(--a-lg);
text-transform: uppercase;
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide p {
font-size: var(--a-fz-hero-sub);
font-weight: 400;
opacity: 0.75;
line-height: 1.7;
max-width: 34ch;
margin-inline: auto;
letter-spacing: 0.02em;
}
/* Hero content block */
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .theme-container {
padding-block: var(--a-4xl);
position: relative;
z-index: 2;
}
/* ----------------------------------------------------------------
08 — BUTTONS
---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--a-xs);
font-weight: 600;
font-size: var(--a-fz-sm);
line-height: 1;
border-radius: var(--a-r-sm);
white-space: nowrap;
user-select: none;
transition: all var(--a-dur) var(--a-ease-out);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.btn-lg {
padding: 1rem 2.5rem;
font-size: var(--a-fz-sm);
}
.btn-xl {
padding: 1.125rem 3rem;
font-size: var(--a-fz-body);
}
.btn-filled {
background: #fff !important;
color: #000 !important;
border: 1px solid transparent !important;
}
.btn-outlined {
background: transparent;
color: var(--foreground, #fff);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-red {
background: var(--a-red);
color: #fff;
border: 1px solid transparent;
}
.btn-red-outline {
background: transparent;
color: var(--a-red);
border: 1px solid var(--a-red);
}
@media (hover: hover) and (pointer: fine) {
.btn-filled:hover {
background: var(--a-red) !important;
border-color: var(--a-red) !important;
color: #fff !important;
}
.btn-outlined:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.4);
}
.btn-red:hover {
background: var(--a-red-hover);
}
.btn-red-outline:hover {
background: var(--a-red-subtle);
}
.btn-filled:active {
background: var(--a-red) !important;
border-color: var(--a-red) !important;
color: #fff !important;
}
.btn:active {
transform: translateY(0) scale(0.97);
opacity: 0.85;
}
}
.btn:disabled {
opacity: 0.35;
pointer-events: none;
}
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--a-r-full);
padding: 0;
}
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon-md { width: 36px; height: 36px; }
.btn-icon-md svg { width: 18px; height: 18px; }
.btn-ghost {
background: transparent;
color: var(--foreground, #fff);
border: none;
transition: background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.btn-ghost:hover { background: var(--a-glass-subtle); }
}
/* ----------------------------------------------------------------
09 — MARQUEE (V11: dark glass, thin borders, soft gradient, red separators)
35–40s full cycle, pause on hover
---------------------------------------------------------------- */
.a-marquee {
width: 100%;
overflow: hidden;
background: rgba(10, 10, 10, 0.95);
border-top: 1px solid var(--a-glass-border);
border-bottom: 1px solid var(--a-glass-border);
padding: 0.875rem 0;
position: relative;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Soft top/bottom gradient for depth */
.a-marquee::before,
.a-marquee::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
z-index: 1;
}
.a-marquee::before {
top: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
.a-marquee::after {
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
.a-marquee__track {
display: flex;
width: max-content;
animation: marqueeScroll 38s linear infinite;
}
.a-marquee:hover .a-marquee__track {
animation-play-state: paused;
}
.a-marquee__item {
display: flex;
align-items: center;
gap: 2.5rem;
padding: 0 2.5rem;
white-space: nowrap;
font-size: clamp(0.6875rem, 1vw, 0.8125rem);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
flex-shrink: 0;
opacity: 0.7;
transition: opacity var(--a-dur) var(--a-ease);
}
.a-marquee:hover .a-marquee__item {
opacity: 1;
}
/* Red separator dot */
.a-marquee__item .a-marquee__dot {
width: 4px;
height: 4px;
background: var(--a-red);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 6px var(--a-red-glow);
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.a-marquee__track { animation: none; }
}
@media (max-width: 430px) {
.a-marquee { padding: 0.75rem 0; }
.a-marquee__item {
font-size: 0.625rem;
gap: 2rem;
padding: 0 2rem;
letter-spacing: 0.14em;
}
.a-marquee__item .a-marquee__dot { width: 3px; height: 3px; }
}
/* ----------------------------------------------------------------
10 — PRODUCTS (V11: always-visible CTA, premium card polish)
Section: section-id="faa7f9f3-26be-4812-aeed-21fa7de9b163"
---------------------------------------------------------------- */
.section-products {
padding-block: var(--a-3xl);
}
@media (min-width: 768px) {
.section-products { padding-block: var(--a-4xl); }
}
.section-products h2 {
font-size: var(--a-fz-section);
font-weight: 700;
letter-spacing: -0.01em;
text-transform: uppercase;
}
/* Product card — elevated, premium */
[data-product-card] a:first-child {
display: block;
overflow: hidden;
border-radius: var(--a-r-lg);
background: var(--secondary, #111);
position: relative;
transition: box-shadow var(--a-dur) var(--a-ease),
transform var(--a-dur) var(--a-ease);
}
[data-product-card] a:first-child img {
transition: transform var(--a-dur) var(--a-ease-out),
filter var(--a-dur) var(--a-ease-out);
}
/* CTA — ALWAYS visible, hover only enhances */
[data-open-quick-view] {
width: 100%;
opacity: 1;
transition: all var(--a-dur) var(--a-ease-out);
}
@media (hover: hover) and (pointer: fine) {
[data-product-card]:hover [data-open-quick-view] {
background: var(--a-red);
border-color: var(--a-red);
box-shadow: var(--a-shadow-glow-sm);
transform: translateY(-1px);
}
}
@media (min-width: 768px) {
[data-open-quick-view] { width: auto; }
}
[data-product-card] h3 {
font-size: var(--a-fz-sm);
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1.4;
}
[data-product-card] .text-foreground.text-sm {
font-size: var(--a-fz-body);
font-weight: 700;
margin-top: var(--a-2xs);
color: #fff;
}
[data-product-card] .text-muted {
color: rgba(255, 255, 255, 0.45);
line-height: 1.55;
margin-top: var(--a-xs);
font-size: var(--a-fz-xs);
}
[data-wishlist-btn] {
transition: transform var(--a-dur-fast) var(--a-ease),
background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
[data-wishlist-btn]:hover {
transform: scale(1.12);
background: rgba(0, 0, 0, 0.4) !important;
}
}
[data-wishlist-btn]:active { transform: scale(0.92); }
[data-product-card] { min-width: 0; }
/* Quantity input */
.qty-input {
display: flex;
align-items: center;
gap: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--a-r-sm);
overflow: hidden;
background: transparent;
height: 44px;
transition: border-color var(--a-dur-fast) var(--a-ease);
}
.qty-input:focus-within { border-color: rgba(255, 255, 255, 0.25); }
.qty-input-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--foreground, #fff);
transition: background var(--a-dur-fast) var(--a-ease),
color var(--a-dur-fast) var(--a-ease);
}
.qty-input-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
.qty-input-btn:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--a-red);
}
}
.qty-input-field {
width: 48px;
height: 44px;
text-align: center;
font-size: var(--a-fz-sm);
font-weight: 600;
color: var(--foreground, #fff);
background: transparent;
border: none;
border-inline: 1px solid rgba(255, 255, 255, 0.08);
-moz-appearance: textfield;
}
.qty-input-field::-webkit-outer-spin-button,
.qty-input-field::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty-input-full { width: 100%; }
@media (min-width: 768px) {
.qty-input-full { width: auto; }
}
#notify-me-form { gap: var(--a-md); }
/* ----------------------------------------------------------------
11 — WHY ASCEND (V11: completely redesigned, editorial, premium icons)
Sections: section-id="439ec750-..." and "5dd604ac-..."
---------------------------------------------------------------- */
.section-benefits {
padding-block: var(--a-3xl);
}
@media (min-width: 768px) {
.section-benefits { padding-block: var(--a-5xl); }
}
.section-benefits .grid {
row-gap: var(--a-xl);
column-gap: var(--a-lg);
}
/* Glass card — editorial, premium */
.section-benefits .flex.flex-col.items-center {
background: var(--a-glass);
border: 1px solid var(--a-glass-border);
border-radius: var(--a-r-2xl);
padding: var(--a-2xl) var(--a-xl);
position: relative;
overflow: hidden;
transition: transform var(--a-dur) var(--a-ease-out),
border-color var(--a-dur) var(--a-ease),
box-shadow var(--a-dur) var(--a-ease-out),
background var(--a-dur) var(--a-ease);
}
/* Top highlight line */
.section-benefits .flex.flex-col.items-center::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
@media (hover: hover) and (pointer: fine) {
.section-benefits .flex.flex-col.items-center:hover {
background: var(--a-glass-hover);
border-color: var(--a-red-soft);
transform: translateY(-8px) scale(1.02);
box-shadow: var(--a-shadow-red-lg), var(--a-shadow-xl);
}
.section-benefits .flex.flex-col.items-center:hover h3 {
color: #fff;
}
.section-benefits .flex.flex-col.items-center:hover p {
opacity: 0.7;
}
}
/* Premium icons — larger, red, with subtle glow */
.section-benefits svg {
width: 52px;
height: 52px;
color: var(--a-red);
opacity: 1;
flex-shrink: 0;
transition: transform var(--a-dur) var(--a-ease-out),
filter var(--a-dur) var(--a-ease);
filter: drop-shadow(0 0 12px var(--a-red-subtle));
}
@media (hover: hover) and (pointer: fine) {
.section-benefits .flex.flex-col.items-center:hover svg {
transform: scale(1.1);
filter: drop-shadow(0 0 20px var(--a-red-glow));
}
}
.section-benefits h3 {
font-size: var(--a-fz-sm);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
margin-top: var(--a-md);
line-height: 1.3;
}
.section-benefits p {
font-size: var(--a-fz-xs);
line-height: 1.65;
opacity: 0.5;
color: var(--foreground, #fff);
margin-top: var(--a-sm);
}
/* ----------------------------------------------------------------
12 — VIDEO (V11: large rounded container, ambient red glow)
Section: section-id="14f77828-8f0c-405f-bf01-374321d256ed"
---------------------------------------------------------------- */
.section-video {
padding-block: var(--a-3xl);
}
@media (max-width: 767px) {
.section-video {
padding-block: var(--a-lg) 0;
}
}
@media (min-width: 768px) {
.section-video { padding-block: var(--a-4xl); }
}
.video-wrapper {
max-width: 960px;
margin-inline: auto;
border-radius: var(--a-r-xl);
overflow: hidden;
border: 1px solid var(--a-glass-border);
position: relative;
background: #000;
}
@media (max-width: 767px) {
.video-wrapper {
border-radius: 0;
border-left: none;
border-right: none;
max-width: 100%;
}
}
/* Ambient red glow behind video */
.video-wrapper::before {
content: '';
position: absolute;
inset: -40px;
background: radial-gradient(
ellipse at center,
var(--a-red-subtle) 0%,
transparent 70%
);
pointer-events: none;
z-index: -1;
opacity: 0.5;
transition: opacity var(--a-dur-slow) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.video-wrapper:hover::before {
opacity: 0.8;
}
}
.section-video video {
border-radius: 0;
display: block;
position: relative;
z-index: 1;
width: 100%;
height: auto;
}
@media (max-width: 767px) {
.section-video video {
max-height: 56vh;
object-fit: contain;
}
}
/* Subtle vignette on video */
.video-wrapper::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 60%,
rgba(0, 0, 0, 0.3) 100%
);
pointer-events: none;
z-index: 2;
}
/* ----------------------------------------------------------------
13 — STATEMENT (Premium CSS-only cinematic banner)
Pure black + ambient red lighting + noise + depth
Section: section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"
---------------------------------------------------------------- */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] {
direction: ltr;
text-align: center;
background: #000000 !important;
position: relative;
overflow: hidden;
}
/* Hide ALL images — pure CSS only */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide picture,
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .bg-primary,
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide > img,
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] img {
display: none !important;
}
/* Ambient red glow — radial, centered, subtle */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"]::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 200%;
background: radial-gradient(
ellipse 60% 50% at center,
rgba(220, 38, 38, 0.07) 0%,
rgba(220, 38, 38, 0.03) 30%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
/* Premium noise texture overlay */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"]::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
opacity: 0.5;
}
/* Slide height */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide {
min-height: 30vh;
}
@media (max-width: 767px) {
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide {
min-height: 26vh;
}
}
@media (min-width: 768px) {
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide {
min-height: 35vh;
}
}
/* Content sits above overlays */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide > div {
position: relative;
z-index: 2;
}
/* Eyebrow */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .text-xs {
font-size: var(--a-fz-xs);
letter-spacing: 0.45em;
font-weight: 500;
opacity: 0.35;
direction: ltr;
text-transform: uppercase;
}
/* Heading — cinematic */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(1.75rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.08;
text-transform: uppercase;
color: #ffffff;
direction: ltr;
text-align: center;
max-width: 800px;
margin-inline: auto;
position: relative;
text-shadow: 0 0 80px rgba(220, 38, 38, 0.1),
0 2px 40px rgba(0, 0, 0, 0.5);
}
/* Red accent underline */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2::after {
content: '';
display: block;
width: 48px;
height: 2px;
background: var(--a-red);
margin: var(--a-xl) auto 0;
border-radius: var(--a-r-full);
box-shadow: 0 0 20px var(--a-red-glow);
}
/* Container spacing */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .theme-container {
padding-block: var(--a-3xl);
}
@media (max-width: 767px) {
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .theme-container {
padding-block: var(--a-xl);
}
}
@media (min-width: 768px) {
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .theme-container {
padding-block: var(--a-4xl);
}
}
/* Embla container */
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
height: 100%;
}
/* ----------------------------------------------------------------
14 — TESTIMONIALS (V11: premium star glow, luxurious cards)
Section: section-id="1dec7afe-91a7-46fa-9440-0393ce6e611e"
---------------------------------------------------------------- */
.section-testimonials {
padding-block: var(--a-3xl);
}
@media (min-width: 768px) {
.section-testimonials { padding-block: var(--a-4xl); }
}
.section-testimonials > .theme-container {
max-width: var(--a-max-w);
}
.section-testimonials h2 {
font-size: var(--a-fz-section);
font-weight: 700;
letter-spacing: -0.01em;
text-transform: uppercase;
}
/* Review card — luxurious glass */
.section-testimonials article {
border: 1px solid var(--a-glass-border);
background: var(--a-glass);
border-radius: var(--a-r-xl);
padding: var(--a-2xl);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: border-color var(--a-dur) var(--a-ease-out),
background var(--a-dur) var(--a-ease-out),
transform var(--a-dur) var(--a-ease-out),
box-shadow var(--a-dur) var(--a-ease-out);
}
/* Top red accent line */
.section-testimonials article::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--a-red), transparent);
opacity: 0;
transition: opacity var(--a-dur) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.section-testimonials article:hover {
border-color: var(--a-glass-interactive);
background: var(--a-glass-hover);
transform: translateY(-8px);
box-shadow: var(--a-shadow-red-md), var(--a-shadow-xl);
}
.section-testimonials article:hover::before { opacity: 1; }
}
/* Star rating — premium glow */
.section-testimonials [aria-label] {
margin-bottom: var(--a-lg);
display: flex;
gap: 2px;
}
.section-testimonials [aria-label] svg {
width: 18px;
height: 18px;
color: var(--a-red);
filter: drop-shadow(0 0 6px var(--a-red-glow));
transition: filter var(--a-dur) var(--a-ease),
transform var(--a-dur) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.section-testimonials article:hover [aria-label] svg {
filter: drop-shadow(0 0 10px var(--a-red-glow));
transform: scale(1.05);
}
}
/* Progress bar */
.embla__progress {
border-radius: var(--a-r-full);
overflow: hidden;
}
.embla__progress-bar {
transform-origin: right;
transform: scaleX(0);
transition: transform var(--a-dur) var(--a-ease-out);
border-radius: var(--a-r-full);
background: var(--a-red);
}
/* Carousel nav */
.embla__prev,
.embla__next {
border-radius: var(--a-r-sm);
transition: background var(--a-dur-fast) var(--a-ease),
opacity var(--a-dur-fast) var(--a-ease),
transform var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.embla__prev:hover,
.embla__next:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.05);
}
.embla__prev:active,
.embla__next:active {
transform: scale(0.92);
}
}
.embla__prev:disabled,
.embla__next:disabled {
opacity: 0.2;
cursor: not-allowed;
}
/* ----------------------------------------------------------------
15 — GALLERY (V11: editorial layout, luxury fashion campaign)
Section: section-id="66b50fc6-1fc4-4feb-9620-7f5756f3884e"
---------------------------------------------------------------- */
.section-gallery {
padding-block: var(--a-3xl);
}
@media (min-width: 768px) {
.section-gallery { padding-block: var(--a-5xl); }
}
.section-gallery h2 {
font-size: var(--a-fz-section);
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: var(--a-2xl);
text-transform: uppercase;
}
.section-gallery .grid {
gap: var(--a-lg);
}
.section-gallery .grid[data-items-count="4"] {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.section-gallery .grid[data-items-count="4"] {
grid-template-columns: repeat(2, 1fr);
gap: var(--a-lg);
}
}
/* Gallery item — editorial */
.section-gallery .group {
border-radius: var(--a-r-xl);
overflow: hidden;
position: relative;
cursor: pointer;
}
.media-wrap {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.media-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--a-dur-cinematic) var(--a-ease-snap);
}
@media (hover: hover) and (pointer: fine) {
.section-gallery .group:hover .media-wrap img {
transform: scale(1.08);
}
}
/* Overlay — elegant gradient, fade on hover */
.section-gallery .absolute.inset-0 {
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.75) 100%
);
opacity: 0;
transition: opacity var(--a-dur) var(--a-ease);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.section-gallery .group:hover .absolute.inset-0 {
opacity: 1;
}
}
.section-gallery h3 {
font-size: var(--a-fz-body);
font-weight: 700;
color: #fff;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ----------------------------------------------------------------
17 — FOOTER (V11: premium redesign)
---------------------------------------------------------------- */
#footer {
padding-block: var(--a-3xl);
border-top: 1px solid var(--a-glass-border);
background: rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
#footer { padding-block: var(--a-4xl); }
}
#footer .grid {
row-gap: var(--a-2xl);
column-gap: var(--a-xl);
}
@media (min-width: 768px) {
#footer .grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
#footer img[alt="ascend"] {
height: 32px;
width: auto;
opacity: 0.9;
transition: opacity var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
#footer img[alt="ascend"]:hover { opacity: 1; }
}
#footer .slate-editor {
font-size: var(--a-fz-sm);
font-style: italic;
opacity: 0.4;
line-height: 1.6;
margin-top: var(--a-sm);
}
#footer h3 {
font-size: var(--a-fz-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.35;
margin-bottom: var(--a-md);
}
#footer ul {
display: flex;
flex-direction: column;
gap: var(--a-sm);
}
#footer ul a {
font-size: var(--a-fz-sm);
opacity: 0.5;
transition: all var(--a-dur-fast) var(--a-ease);
position: relative;
display: inline-block;
}
/* Link underline animation */
#footer ul a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--a-red);
transition: width var(--a-dur) var(--a-ease-out);
}
@media (hover: hover) and (pointer: fine) {
#footer ul a:hover {
opacity: 1;
color: var(--a-red);
}
#footer ul a:hover::after {
width: 100%;
}
}
#footer .flex.gap-3 {
gap: var(--a-sm);
}
#footer .flex.gap-3 a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--a-r-sm);
background: rgba(255, 255, 255, 0.04);
transition: all var(--a-dur-fast) var(--a-ease);
}
#footer .flex.gap-3 a svg {
width: 18px;
height: 18px;
opacity: 0.5;
transition: opacity var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
#footer .flex.gap-3 a:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-3px);
}
#footer .flex.gap-3 a:hover svg { opacity: 1; }
}
#footer .border-t {
border-color: var(--a-glass-border);
margin-top: var(--a-2xl);
padding-top: var(--a-xl);
}
#footer .border-t .text-sm {
font-size: var(--a-fz-xs);
opacity: 0.3;
}
#footer .flex-wrap {
gap: var(--a-sm);
}
#footer .flex-wrap img {
height: 20px;
width: auto;
max-width: none;
opacity: 0.3;
transition: all var(--a-dur-fast) var(--a-ease);
border-radius: var(--a-r-xs);
}
@media (hover: hover) and (pointer: fine) {
#footer .flex-wrap img:hover {
opacity: 0.75;
transform: scale(1.05);
}
}
#footer .flex-wrap a {
display: flex;
align-items: center;
padding: var(--a-2xs) 0;
}
/* ----------------------------------------------------------------
18 — DIALOGS
---------------------------------------------------------------- */
el-dialog-backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
el-dialog-panel {
background: var(--background, #000);
border: 1px solid var(--a-glass-border);
border-radius: var(--a-r-xl);
box-shadow: var(--a-shadow-xl);
}
el-dialog-panel h2 {
color: var(--foreground, #fff);
}
el-dialog-panel button[command="close"] {
border-radius: var(--a-r-sm);
transition: background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
el-dialog-panel button[command="close"]:hover {
background: rgba(255, 255, 255, 0.12);
}
}
#product-quick-view-modal[open] {
border-radius: var(--a-r-xl);
border: 1px solid var(--a-glass-border);
box-shadow: var(--a-shadow-xl);
}
#product-quick-view-modal > el-dialog-backdrop {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#product-quick-view-modal .product-quick-view-container > *:first-child {
background: #111;
}
#product-quick-view-modal button[command="close"],
#product-quick-view-modal [data-command="close"] {
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: var(--a-r-full);
transition: background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
#product-quick-view-modal button[command="close"]:hover,
#product-quick-view-modal [data-command="close"]:hover {
background: var(--a-red-accent);
}
}
#product-quick-view-modal .btn-filled,
#product-quick-view-modal .btn-red,
#product-quick-view-modal button[type="submit"] {
background: var(--a-red);
color: #fff;
border: none;
border-radius: var(--a-r-sm);
transition: background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
#product-quick-view-modal .btn-filled:hover,
#product-quick-view-modal .btn-red:hover,
#product-quick-view-modal button[type="submit"]:hover {
background: var(--a-red-hover);
}
}
#product-quick-view-modal select,
#product-quick-view-modal [data-option-selector] {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--a-r-sm);
color: var(--foreground, #fff);
}
#product-quick-view-modal select:focus,
#product-quick-view-modal [data-option-selector]:focus {
border-color: var(--a-red);
box-shadow: 0 0 0 3px var(--a-red-subtle);
outline: none;
}
#quick-view-skeleton > div {
animation: pulse 2s ease-in-out infinite;
}
/* ----------------------------------------------------------------
19 — FORMS
---------------------------------------------------------------- */
.form-input {
width: 100%;
height: 48px;
padding: 0 var(--a-md);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--a-r-sm);
color: var(--foreground, #fff);
font-size: var(--a-fz-sm);
transition: all var(--a-dur-fast) var(--a-ease);
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.3);
opacity: 1;
}
.form-input:hover {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.02);
}
.form-input:focus {
border-color: var(--a-red);
box-shadow: 0 0 0 3px var(--a-red-subtle);
outline: none;
background: rgba(255, 255, 255, 0.03);
}
[data-phone-input] {
border-color: rgba(255, 255, 255, 0.12) !important;
border-radius: var(--a-r-sm) !important;
transition: all var(--a-dur-fast) var(--a-ease);
}
[data-phone-input]:focus-within {
border-color: var(--a-red) !important;
box-shadow: 0 0 0 3px var(--a-red-subtle);
}
[data-phone-input] input[type="tel"] {
background: transparent;
border: none;
color: var(--foreground, #fff);
font-size: var(--a-fz-sm);
}
[data-phone-input] input[type="tel"]::placeholder {
color: rgba(255, 255, 255, 0.3);
}
[data-phone-country-list] {
max-height: 240px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.phone-country-option {
display: flex;
align-items: center;
gap: var(--a-sm);
width: 100%;
padding: var(--a-xs) var(--a-sm);
font-size: var(--a-fz-sm);
border-radius: var(--a-r-xs);
transition: background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.phone-country-option:hover { background: rgba(255, 255, 255, 0.06); }
}
.phone-country-option:active { background: rgba(255, 255, 255, 0.08); }
/* ----------------------------------------------------------------
20 — TOAST
---------------------------------------------------------------- */
#zid_toaster { z-index: 300; }
[data-sonner-toaster] {
font-family: var(--font-family, 'Roboto', sans-serif) !important;
}
[data-sonner-toaster] [data-sonner-toast] {
border-radius: var(--a-r-md) !important;
border: 1px solid var(--a-glass-border) !important;
background: rgba(20, 20, 20, 0.95) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* ----------------------------------------------------------------
21 — ANIMATIONS
---------------------------------------------------------------- */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes btnRipple {
from { transform: scale(0); opacity: 0.4; }
to { transform: scale(1); opacity: 0; }
}
.currency-symbol-loading { visibility: hidden; }
/* ----------------------------------------------------------------
22 — RESPONSIVE (V11: 7 breakpoints, premium mobile)
---------------------------------------------------------------- */
/* max 360 */
@media (max-width: 360px) {
:root { --a-max-w: 100%; }
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(1.25rem, 8vw, 1.875rem);
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .theme-container {
padding-inline: var(--a-sm);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .theme-container {
padding-block: var(--a-md);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(1.125rem, 6vw, 1.75rem);
}
.section-products { padding-inline: var(--a-sm); }
.section-benefits { padding-inline: var(--a-sm); }
.section-testimonials { padding-inline: var(--a-sm); }
.section-gallery { padding-inline: var(--a-sm); }
#footer { padding-inline: var(--a-sm); }
}
/* max 430 */
@media (max-width: 430px) {
.section-carousel[data-variant="default"] .embla__slide {
min-height: 45vh;
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(1.75rem, 9vw, 2.5rem);
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .theme-container {
padding-block: var(--a-2xl);
padding-inline: var(--a-md);
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .btn-filled {
padding: 0.75rem 1.75rem;
font-size: var(--a-fz-xs);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide {
min-height: 28vh;
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .theme-container {
padding-block: var(--a-lg);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(1.25rem, 7vw, 2rem);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2::after {
width: 40px;
height: 2px;
margin-top: var(--a-md);
}
.section-products { padding-block: var(--a-xl); }
.section-products .grid { gap-x: var(--a-sm); gap-y: var(--a-lg); }
.section-benefits { padding-block: var(--a-2xl); }
.section-benefits .grid { grid-template-columns: repeat(2, 1fr); gap: var(--a-md); }
.section-benefits .flex.flex-col.items-center { padding: var(--a-xl) var(--a-md); }
.section-benefits svg { width: 44px; height: 44px; }
.section-benefits h3 { font-size: var(--a-fz-xs); }
.section-benefits p { font-size: var(--a-fz-2xs); }
.section-gallery { padding-block: var(--a-xl); }
.section-gallery .grid { gap: var(--a-md); }
.section-gallery h3 { font-size: var(--a-fz-sm); }
#footer { padding-block: var(--a-xl); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--a-fz-xs); }
}
@media (max-width: 390px) {
.section-carousel[data-variant="default"] .embla__slide {
min-height: 42vh;
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(1.5rem, 9vw, 2.125rem);
}
.section-benefits .grid { grid-template-columns: 1fr 1fr; gap: var(--a-sm); }
.media-wrap { aspect-ratio: 1 / 1; }
}
/* max 768 */
@media (max-width: 768px) {
:root { --a-header-h: 56px; }
.section-carousel[data-variant="default"] .embla__slide {
min-height: 45vh;
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(2rem, 8vw, 3.5rem);
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide p {
font-size: var(--a-fz-body);
}
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .theme-container {
padding-block: var(--a-3xl);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide {
min-height: 30vh;
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(1.5rem, 6vw, 2.5rem);
}
.section-benefits .grid { grid-template-columns: repeat(2, 1fr); }
.section-gallery .grid[data-items-count="4"] {
grid-template-columns: repeat(2, 1fr);
}
#footer .grid { grid-template-columns: 1fr; gap: var(--a-2xl); }
#footer .border-t > div {
flex-direction: column;
align-items: center;
gap: var(--a-md);
text-align: center;
}
}
/* max 992 */
@media (max-width: 992px) {
.section-carousel[data-variant="default"] .embla__slide {
min-height: 50vh;
}
.section-products .grid { gap-x: var(--a-lg); gap-y: var(--a-xl); }
.section-benefits .grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--a-xl);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] .embla__slide {
min-height: 35vh;
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(1.75rem, 5vw, 3rem);
padding-inline: var(--a-md);
}
}
/* 1024–1439 */
@media (min-width: 1024px) and (max-width: 1439px) {
:root { --a-max-w: 1100px; }
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(2.75rem, 5vw, 4.5rem);
}
}
/* 1440–1919 */
@media (min-width: 1440px) and (max-width: 1919px) {
:root { --a-max-w: 1280px; }
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(3.25rem, 5vw, 5.5rem);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(2.75rem, 4.5vw, 4.5rem);
}
}
/* 1920+ */
@media (min-width: 1920px) {
:root { --a-max-w: 1320px; }
[section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
font-size: clamp(3.75rem, 5vw, 6rem);
}
[section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
font-size: clamp(3rem, 4.5vw, 5rem);
}
}
/* ----------------------------------------------------------------
23 — ZID COMPATIBILITY
---------------------------------------------------------------- */
.loyalty-rewards-popup__close {
transition: transform var(--a-dur-fast) var(--a-ease),
color var(--a-dur-fast) var(--a-ease);
}
[dir="rtl"] [section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"],
[dir="rtl"] [section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] * {
direction: ltr;
text-align: center;
}
/* Share icons — force visible on dark background (--muted-foreground undefined in theme) */
#product-main-section .text-muted-foreground {
color: rgba(255, 255, 255, 0.55);
}
#product-main-section .text-muted-foreground:hover {
color: #fff;
}
/* ----------------------------------------------------------------
24 — LANGUAGE: ENGLISH OVERRIDES
---------------------------------------------------------------- */
:lang(en) [section-id="38874995-69ae-4eca-ba54-4e029d75d56a"] .embla__slide h2 {
letter-spacing: 0.01em;
}
:lang(en) [section-id="3ab693fb-5006-497a-ae61-c83524e12bbf"] h2 {
letter-spacing: 0.05em;
}
:lang(en) .section-gallery h3 {
letter-spacing: 0.07em;
}
:lang(en) #footer h3 {
letter-spacing: 0.14em;
}
:lang(en) .section-testimonials article h3 {
letter-spacing: 0.08em;
}
:lang(en) .a-marquee__item {
letter-spacing: 0.2em;
}
:lang(en) .section-benefits h3 {
letter-spacing: 0.02em;
}
/* ----------------------------------------------------------------
25 — PRINT
---------------------------------------------------------------- */
@media print {
header, .a-marquee, .a-scroll-top,
#footer, .embla__prev, .embla__next, .embla__progress {
display: none !important;
}
section { break-inside: avoid; }
* {
color: #000 !important;
background: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
}
}
/* ----------------------------------------------------------------
26 — HIGH CONTRAST
---------------------------------------------------------------- */
@media (forced-colors: active) {
.btn-filled,
.btn-red { border: 2px solid ButtonText; }
.a-marquee {
border-top: 2px solid;
border-bottom: 2px solid;
}
[data-product-card] a:first-child { border: 2px solid; }
.section-testimonials article,
.section-benefits .flex.flex-col.items-center { border: 2px solid; }
}
/* ----------------------------------------------------------------
27 — BODY SCROLL LOCK
---------------------------------------------------------------- */
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
top: calc(-1 * var(--scroll-y, 0px));
}
/* ----------------------------------------------------------------
28 — PREMIUM LOADING SCREEN
---------------------------------------------------------------- */
.ascend-loading {
position: fixed;
inset: 0;
z-index: 10000;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity var(--a-dur-slow) var(--a-ease-out);
pointer-events: all;
}
.ascend-loading.is-hiding {
opacity: 0;
pointer-events: none;
}
.ascend-loading__text {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: 0.35em;
text-transform: uppercase;
color: #fff;
margin-bottom: var(--a-xl);
}
.ascend-loading__bar {
width: 180px;
height: 2px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--a-r-full);
overflow: hidden;
}
.ascend-loading__fill {
height: 100%;
width: 0;
background: #fff;
border-radius: var(--a-r-full);
transition: width var(--a-dur) var(--a-ease-out);
}
.ascend-loading__noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
}
.ascend-loading__vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none;
}
/* ----------------------------------------------------------------
29 — PREMIUM VIDEO CARD
---------------------------------------------------------------- */
.ascend-video-card {
position: relative;
max-width: 960px;
margin-inline: auto;
border-radius: var(--a-r-xl);
overflow: hidden;
border: 1px solid var(--a-glass-border);
}
.ascend-video-card video {
display: block;
width: 100%;
}
.ascend-video-noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
.ascend-video-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
pointer-events: none;
z-index: 2;
}
/* ----------------------------------------------------------------
30 — MOBILE ACTIVE STATE
---------------------------------------------------------------- */
.ascend-mobile-active [data-product-card]:hover a:first-child {
box-shadow: var(--a-shadow-red-sm);
transform: translateY(-4px);
}
.ascend-mobile-active [data-product-card]:hover a:first-child img {
transform: scale(1.06);
}
.ascend-mobile-active [data-product-card]:hover [data-open-quick-view] {
background: var(--a-red);
border-color: var(--a-red);
box-shadow: var(--a-shadow-glow-sm);
transform: translateY(-1px);
}
.ascend-mobile-active .section-benefits .flex.flex-col.items-center:hover {
background: var(--a-glass-hover);
border-color: var(--a-red-soft);
transform: translateY(-8px) scale(1.02);
box-shadow: var(--a-shadow-red-lg), var(--a-shadow-xl);
}
.ascend-mobile-active .section-testimonials article:hover {
border-color: var(--a-glass-interactive);
background: var(--a-glass-hover);
transform: translateY(-8px);
box-shadow: var(--a-shadow-red-md), var(--a-shadow-xl);
}
.ascend-mobile-active .a-scroll-top {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* ----------------------------------------------------------------
31 — KEYFRAME ANIMATIONS (V3.8)
---------------------------------------------------------------- */
/* loadPulse: use pulse (§21). overlayIn/modalIn/modalOut/barFill: unused, removed. */
/* ================================================================
32 — ADDITIONS: CRITICAL FIXES
================================================================ */
/* btn-filled:active outside hover media query (mobile fix) */
.btn-filled:active {
background: var(--a-red) !important;
border-color: var(--a-red) !important;
color: #fff !important;
transform: translateY(0) scale(0.98);
}
/* Share icons — global fix */
.text-muted-foreground {
color: var(--muted-foreground) !important;
transition: color var(--a-dur-fast) var(--a-ease);
}
.text-muted-foreground:hover {
color: #fff !important;
}
/* Quantity buttons 44px → 48px */
.qty-input-btn {
min-width: 48px;
min-height: 48px;
}
/* Out-of-stock button visibility */
[data-out-of-stock] .btn {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.35) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Loading screen version bump */
.ascend-loading[data-version-changed] .ascend-loading__fill {
width: 100% !important;
}
/* Mobile force red on tap */
.ascend-mobile-active .btn-filled:active {
background: var(--a-red) !important;
border-color: var(--a-red) !important;
color: #fff !important;
transform: scale(0.98);
}
@media (hover: none) {
.btn-filled:active {
background: var(--a-red) !important;
border-color: var(--a-red) !important;
color: #fff !important;
transform: scale(0.98);
}
.btn-filled {
-webkit-tap-highlight-color: rgba(220, 38, 38, 0.2);
}
}
/* ================================================================
33 — ADDITIONS: SCROLL TEXT REVEAL
================================================================ */
.a-text-reveal-word {
display: inline-block;
opacity: 0;
transform: translateY(16px);
transition: opacity var(--a-dur-slow) var(--a-ease-out),
transform var(--a-dur-slow) var(--a-ease-out);
}
.a-text-reveal-word.is-visible {
opacity: 1;
transform: translateY(0);
}
.a-text-reveal-word[data-delay="1"] { transition-delay: 50ms; }
.a-text-reveal-word[data-delay="2"] { transition-delay: 100ms; }
.a-text-reveal-word[data-delay="3"] { transition-delay: 150ms; }
.a-text-reveal-word[data-delay="4"] { transition-delay: 200ms; }
.a-text-reveal-word[data-delay="5"] { transition-delay: 250ms; }
.a-text-reveal-word[data-delay="6"] { transition-delay: 300ms; }
.a-text-reveal-word[data-delay="7"] { transition-delay: 350ms; }
.a-text-reveal-word[data-delay="8"] { transition-delay: 400ms; }
.a-text-reveal-word[data-delay="9"] { transition-delay: 450ms; }
.a-text-reveal-word[data-delay="10"] { transition-delay: 500ms; }
/* ================================================================
36 — ADDITIONS: 3D TILT PRODUCT CARDS
================================================================ */
[data-product-card].a-tilt-active {
perspective: 800px;
transform-style: preserve-3d;
transition: transform var(--a-dur) var(--a-ease-out);
}
[data-product-card].a-tilt-active > * {
pointer-events: auto;
}
@media (hover: none) {
[data-product-card].a-tilt-active {
perspective: none;
transform-style: flat;
}
}
/* ================================================================
37 — ADDITIONS: NUMBER COUNTER
================================================================ */
.a-counter {
display: inline-block;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* ================================================================
38 — ADDITIONS: WISHLIST HEART BURST
================================================================ */
.a-heart-particle {
position: absolute;
width: 6px; height: 6px;
background: var(--a-red);
border-radius: 50%;
pointer-events: none;
animation: heartBurst 600ms var(--a-ease-out) forwards;
}
@keyframes heartBurst {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}
[data-wishlist-btn].a-heart-pop svg {
animation: heartPop 400ms var(--a-ease-bounce);
}
@keyframes heartPop {
0% { transform: scale(1); }
40% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* ================================================================
39 — ADDITIONS: PAGE TRANSITION
================================================================ */
.a-page-transition {
position: fixed; inset: 0; background: #000;
z-index: 99999; opacity: 0; pointer-events: none;
transition: opacity var(--a-dur) var(--a-ease-out);
}
.a-page-transition.is-active {
opacity: 1; pointer-events: all;
}
/* ================================================================
42 — ADDITIONS: PARALLAX WILL-CHANGE
================================================================ */
.section-carousel[data-variant="default"] .embla__slide picture {
will-change: transform;
}
/* ================================================================
45 — V3.8: SKELETON LOADING
================================================================ */
.a-skeleton {
background: #111;
border-radius: var(--a-r-md, 10px);
position: relative;
overflow: hidden;
}
.a-skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
animation: skeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes skeletonShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.a-skeleton--text {
height: 1em;
border-radius: var(--a-r-xs);
}
.a-skeleton--title {
height: 1.5em;
width: 60%;
border-radius: var(--a-r-xs);
}
.a-skeleton--img {
aspect-ratio: 1;
border-radius: var(--a-r-lg, 14px);
}
.a-skeleton--btn {
height: 48px;
width: 200px;
border-radius: var(--a-r-sm, 6px);
}
.a-skeleton.is-loaded {
opacity: 0;
transition: opacity var(--a-dur) var(--a-ease);
pointer-events: none;
}
/* ================================================================
46 — V3.8: PREMIUM IMAGE HOVER
================================================================ */
[data-product-card] a:first-child img {
transition: transform var(--a-dur) var(--a-ease-out),
filter var(--a-dur) var(--a-ease-out);
}
@media (hover: hover) and (pointer: fine) {
[data-product-card]:hover a:first-child img {
transform: scale(1.05);
filter: brightness(1.05);
}
[data-product-card]:hover a:first-child {
transform: translateY(-4px);
box-shadow: var(--a-shadow-red-sm);
}
}
/* ================================================================
47 — V3.8: PRODUCT IMAGE ZOOM (mouse follow)
================================================================ */
.a-zoom-lens {
position: fixed;
width: 180px;
height: 180px;
border-radius: var(--a-r-full);
border: 2px solid var(--a-glass-strong);
pointer-events: none;
z-index: 9990;
opacity: 0;
transition: opacity var(--a-dur-fast) var(--a-ease);
overflow: hidden;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.a-zoom-lens.is-active {
opacity: 1;
}
.a-zoom-lens img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: none) {
.a-zoom-lens { display: none !important; }
}
/* ================================================================
48 — V3.8: SCROLL PROGRESS BAR
================================================================ */
.a-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--a-red, #DC2626);
z-index: 10001;
transition: width 80ms linear;
will-change: width;
}
[dir="rtl"] .a-scroll-progress {
left: auto;
right: 0;
}
/* ================================================================
49 — V3.8: PREMIUM SECTION REVEAL
================================================================ */
.a-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--a-dur-slow) var(--a-ease-out),
transform var(--a-dur-slow) var(--a-ease-out);
}
.a-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.a-reveal[data-delay="1"] { transition-delay: 100ms; }
.a-reveal[data-delay="2"] { transition-delay: 200ms; }
.a-reveal[data-delay="3"] { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
.a-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ================================================================
50 — V3.8: PREMIUM BUTTONS
================================================================ */
.btn-filled,
.btn-outlined,
.btn-red,
.btn-red-outline {
transition: transform 250ms var(--a-ease-out),
box-shadow 250ms var(--a-ease-out),
background 200ms ease,
border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
.btn-filled:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px var(--a-red-accent);
}
.btn-outlined:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.08);
}
.btn-red:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px var(--a-red-accent);
}
.btn-red-outline:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px rgba(220, 38, 38, 0.15);
}
}
@media (hover: none) {
.btn-filled:active,
.btn-outlined:active,
.btn-red:active {
transform: scale(0.97);
transition-duration: 100ms;
}
}
/* ================================================================
51 — V3.8: FLOATING MOBILE CTA
================================================================ */
.a-floating-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 1rem;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.06);
z-index: 9990;
transform: translateY(100%);
transition: transform var(--a-dur) var(--a-ease-out);
}
.a-floating-cta.is-visible {
transform: translateY(0);
}
.a-floating-cta .btn {
flex: 1;
text-align: center;
font-size: 0.75rem;
padding: 0.875rem 1rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.a-floating-cta .a-cta-buy {
background: var(--a-red, #DC2626);
color: #fff;
}
.a-floating-cta .a-cta-cart {
background: rgba(255, 255, 255, 0.06);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) {
.a-floating-cta {
display: flex;
}
body {
padding-bottom: 80px;
}
}
@media (min-width: 769px) {
.a-floating-cta {
display: none !important;
}
}
/* Scroll-to-top: above floating CTA on mobile */
@media (max-width: 768px) {
.a-scroll-top {
bottom: 100px !important;
}
}
/* ================================================================
52 — MOBILE HEADER + DRAWER REDESIGN
Layout: ☰ ASCEND AR|EN 🛒
Premium · Black · White · Red accent
Desktop remains untouched
================================================================ */
/* --- 52a: Hide unnecessary mobile header items --- */
@media (max-width: 768px) {
/* Hide ALL header ul items first */
header nav > ul.flex > li {
display: none !important;
}
/* Show language switch — target by onclick (survives nukeSearch DOM shift) */
header nav > ul.flex > li button[onclick*="zidOpenRegionSettingDialog"] {
display: flex !important;
}
header nav > ul.flex > li:has(button[onclick*="zidOpenRegionSettingDialog"]) {
display: list-item !important;
}
/* Show cart (last child) */
header nav > ul.flex > li:last-child {
display: list-item !important;
}
/* Hide desktop nav inside logo container */
header nav > .flex.items-center > ul {
display: none !important;
}
}
/* --- 52b: Logo centered ---
![]()
has Tailwind: absolute left-1/2 -translate-x-1/2 -translate-y-1/2
We add the missing top: 50% to complete vertical centering.
Do NOT position the wrapper — it creates a 0-width containing block that clips the ![]()
.
Do NOT override position/transform on ![]()
— Tailwind @layer utilities wins. */
@media (max-width: 768px) {
header img[alt="ascend"],
header img[alt="ascend logo"] {
top: 50% !important;
height: 40px !important;
max-height: 40px !important;
animation: logoFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
}
@keyframes logoFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* --- 52c: Header item colors --- */
@media (max-width: 768px) {
/* Hamburger — white */
header button[commandfor="mobile-drawer"],
header button[aria-label*="menu"],
header button[aria-label*="Menu"],
header button[aria-label*=".Menu"] {
color: #fff !important;
background: transparent !important;
}
header button[commandfor="mobile-drawer"] span {
background: #fff !important;
}
/* Language button — clean white */
header nav > ul > li button[onclick*="zidOpenRegionSettingDialog"] {
color: #fff !important;
text-decoration: none !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
}
header nav > ul > li button[onclick*="zidOpenRegionSettingDialog"] svg {
color: #fff !important;
fill: none !important;
stroke: #fff !important;
}
header nav > ul > li:has(button[onclick*="zidOpenRegionSettingDialog"]) {
display: flex !important;
align-items: center !important;
}
.nav-country-text {
color: #fff !important;
}
/* Cart — white icon */
header nav > ul > li:last-child a {
color: #fff !important;
display: flex !important;
align-items: center !important;
}
header nav > ul > li:last-child a svg {
fill: #fff !important;
stroke: #fff !important;
}
/* Cart badge — red */
header [data-cart-badge] {
background: var(--a-red) !important;
color: #fff !important;
border: none !important;
}
/* Remove header bottom border for cleaner look */
header.bg-secondary {
border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}
}
/* --- 52d: Mobile drawer — full redesign --- */
@media (max-width: 768px) {
/* Backdrop */
#mobile-drawer el-dialog-backdrop {
background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* Panel */
#mobile-drawer el-dialog-panel {
background: #000 !important;
border-left: 1px solid rgba(255, 255, 255, 0.04) !important;
transition: transform 400ms var(--a-ease-out) !important;
}
#mobile-drawer .bg-background,
#mobile-drawer el-dialog-panel > div {
background: #000 !important;
}
#mobile-drawer .overflow-y-auto {
padding: 0 !important;
gap: 0 !important;
}
/* Hide default Zid drawer content — JS replaces it */
#mobile-drawer .border-border-light {
display: none !important;
}
}
/* --- Drawer component styles (injected by JS) --- */
.a-drawer-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.a-drawer-brand {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #fff;
}
.a-drawer-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--a-r-full);
color: var(--muted-foreground);
transition: all var(--a-dur-fast) var(--a-ease);
flex-shrink: 0;
}
.a-drawer-close:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
}
.a-drawer-nav {
flex: 1;
overflow-y: auto;
padding: 0.5rem 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.a-drawer-nav::-webkit-scrollbar { display: none; }
.a-drawer-section {
padding: 0 0.75rem;
}
.a-drawer-label {
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.18);
padding: 1rem 0.75rem 0.375rem;
}
.a-drawer-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0.75rem;
color: rgba(255, 255, 255, 0.65);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: var(--a-r-md);
transition: all var(--a-dur-fast) var(--a-ease);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.a-drawer-link:hover,
.a-drawer-link:active {
color: #fff;
background: var(--a-glass);
}
.a-drawer-link:active {
color: var(--a-red);
background: var(--a-red-subtle);
}
.a-drawer-link svg {
width: 18px;
height: 18px;
opacity: 0.35;
flex-shrink: 0;
}
.a-drawer-link--accent {
color: var(--a-red);
font-weight: 600;
transition: color var(--a-dur-fast) var(--a-ease),
background var(--a-dur-fast) var(--a-ease);
}
.a-drawer-link--accent svg {
opacity: 0.7;
}
.a-drawer-link--accent:hover,
.a-drawer-link--accent:active {
color: var(--a-red);
background: var(--a-red-subtle);
}
.a-drawer-divider {
height: 1px;
background: rgba(255, 255, 255, 0.05);
margin: 0.375rem 1.5rem;
}
.a-drawer-social {
padding: 1rem 1.5rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
gap: 0.625rem;
justify-content: center;
flex-shrink: 0;
}
.a-drawer-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--a-r-md);
background: var(--a-glass);
color: var(--muted-foreground);
transition: all var(--a-dur-fast) var(--a-ease);
-webkit-tap-highlight-color: transparent;
}
.a-drawer-social a:hover,
.a-drawer-social a:active {
background: rgba(255, 255, 255, 0.07);
color: #fff;
}
.a-drawer-social a svg {
width: 20px;
height: 20px;
}
/* --- 52e: Horizontal scroll fix --- */
html {
overflow-x: hidden;
}
html, body {
max-width: 100%;
}
@media (max-width: 768px) {
section {
overflow-x: hidden;
overflow-x: clip;
overflow-y: visible;
}
}
/* ================================================================
53 — PHASE 3: TESTIMONIALS PREMIUM
Verified badge · Avatar · Stagger · Quote icon · Author row
================================================================ */
/* Staggered card entrance */
.section-testimonials article.a-reveal:nth-child(1) { transition-delay: 0ms; }
.section-testimonials article.a-reveal:nth-child(2) { transition-delay: 120ms; }
.section-testimonials article.a-reveal:nth-child(3) { transition-delay: 240ms; }
/* Decorative quote mark */
.section-testimonials article {
position: relative;
}
.section-testimonials article::after {
content: '\201C';
position: absolute;
top: var(--a-lg);
right: var(--a-xl);
font-size: 3.5rem;
font-family: Georgia, 'Times New Roman', serif;
color: var(--a-red);
opacity: 0.06;
line-height: 1;
pointer-events: none;
transition: opacity var(--a-dur) var(--a-ease);
}
[dir="rtl"] .section-testimonials article::after {
right: auto;
left: var(--a-xl);
}
@media (hover: hover) and (pointer: fine) {
.section-testimonials article:hover::after {
opacity: 0.12;
}
}
/* Better quote text */
.section-testimonials article p {
font-size: var(--a-fz-body);
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
flex: 1;
margin-bottom: var(--a-2xl);
font-style: italic;
padding-left: var(--a-lg);
border-left: 2px solid var(--a-red);
}
[dir="rtl"] .section-testimonials article p {
padding-left: 0;
padding-right: var(--a-lg);
border-left: none;
border-right: 2px solid var(--a-red);
}
/* Author row: avatar + name + badge */
.a-reviewer-row {
display: flex;
align-items: center;
gap: var(--a-sm);
padding-top: var(--a-lg);
border-top: 1px solid var(--a-glass-border);
}
/* Avatar circle with initial */
.a-reviewer-avatar {
width: 38px;
height: 38px;
border-radius: var(--a-r-full);
background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.04));
border: 1px solid rgba(220, 38, 38, 0.22);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--a-fz-xs);
font-weight: 700;
color: var(--a-red);
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.02em;
transition: border-color var(--a-dur) var(--a-ease),
box-shadow var(--a-dur) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.section-testimonials article:hover .a-reviewer-avatar {
border-color: rgba(220, 38, 38, 0.4);
box-shadow: 0 0 16px rgba(220, 38, 38, 0.12);
}
}
.a-reviewer-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
/* Author name */
.section-testimonials article h3 {
font-size: var(--a-fz-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.7;
line-height: 1.2;
}
/* Verified buyer badge */
.a-verified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--a-fz-2xs);
font-weight: 600;
color: var(--a-red);
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.7;
}
.a-verified-badge svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ================================================================
54 — PHASE 3: WHATSAPP FLOATING BUTTON
Bottom-left · Scroll hide/show · Premium green glow
================================================================ */
.a-whatsapp-btn {
position: fixed;
bottom: 24px;
left: 24px;
width: 52px;
height: 52px;
border-radius: var(--a-r-full);
background: #25D366;
will-change: transform, opacity;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 9989;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
transition: transform var(--a-dur) var(--a-ease-out),
box-shadow var(--a-dur) var(--a-ease),
opacity var(--a-dur) var(--a-ease);
opacity: 0;
transform: scale(0.7) translateY(16px);
pointer-events: none;
-webkit-tap-highlight-color: transparent;
}
.a-whatsapp-btn.is-visible {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.a-whatsapp-btn.is-hidden {
transform: scale(0.7) translateY(24px);
opacity: 0;
pointer-events: none;
}
.a-whatsapp-btn svg {
width: 26px;
height: 26px;
}
@media (hover: hover) and (pointer: fine) {
.a-whatsapp-btn:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 6px 28px rgba(37, 211, 102, 0.45),
0 0 0 4px rgba(37, 211, 102, 0.12);
}
.a-whatsapp-btn:active {
transform: scale(0.95);
}
}
@supports (padding: env(safe-area-inset-bottom)) {
.a-whatsapp-btn {
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 768px) {
.a-whatsapp-btn {
bottom: 100px;
left: 16px;
width: 48px;
height: 48px;
}
.a-whatsapp-btn svg {
width: 24px;
height: 24px;
}
}
/* ================================================================
55 — PHASE 3: PRODUCT EXPERIENCE
Sticky ATC · Trust badges · Variant polish · Share polish
================================================================ */
/* --- Sticky ATC Bar (mobile) --- */
.a-sticky-atc {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0.625rem 1rem;
padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
will-change: transform;
background: rgba(0, 0, 0, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid rgba(255, 255, 255, 0.06);
z-index: 9988;
transform: translateY(100%);
transition: transform var(--a-dur) var(--a-ease-out);
gap: 0.75rem;
align-items: center;
}
.a-sticky-atc.is-visible {
transform: translateY(0);
}
.a-sticky-atc .a-sticky-price {
font-size: var(--a-fz-body);
font-weight: 700;
color: #fff;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.a-sticky-atc .a-sticky-atc-btn {
flex: 1;
background: var(--a-red);
color: #fff;
border: none;
border-radius: var(--a-r-sm);
padding: 0.75rem 1.25rem;
font-size: var(--a-fz-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: background var(--a-dur-fast) var(--a-ease),
transform var(--a-dur-fast) var(--a-ease);
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
}
.a-sticky-atc .a-sticky-atc-btn:active {
transform: scale(0.97);
background: var(--a-red-hover);
}
@media (max-width: 768px) {
.a-sticky-atc { display: flex; }
}
/* --- Product Trust Badges (inline on product page) --- */
.a-product-trust {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
margin-top: var(--a-lg);
background: var(--a-glass-border);
border: 1px solid var(--a-glass-border);
border-radius: var(--a-r-lg);
overflow: hidden;
}
@media (min-width: 480px) {
.a-product-trust {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.a-product-trust {
grid-template-columns: repeat(5, 1fr);
}
}
.a-product-trust-item {
display: flex;
align-items: center;
gap: var(--a-xs);
padding: var(--a-md) var(--a-lg);
background: var(--a-glass);
transition: background var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.a-product-trust-item:hover {
background: var(--a-glass-hover);
}
}
.a-product-trust-item svg {
width: 18px;
height: 18px;
color: var(--a-red);
opacity: 0.8;
flex-shrink: 0;
}
.a-product-trust-item span {
font-size: var(--a-fz-2xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
line-height: 1.3;
}
/* --- Variant Selector Polish --- */
#product-main-section [data-option-selector] {
border-radius: var(--a-r-sm) !important;
transition: border-color var(--a-dur-fast) var(--a-ease),
box-shadow var(--a-dur-fast) var(--a-ease) !important;
}
#product-main-section [data-option-selector]:focus {
border-color: var(--a-red) !important;
box-shadow: 0 0 0 3px var(--a-red-subtle) !important;
}
/* --- Share Button Polish --- */
#product-main-section .text-muted-foreground a,
#product-main-section .text-muted-foreground button {
transition: color var(--a-dur-fast) var(--a-ease), transform var(--a-dur-fast) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
#product-main-section .text-muted-foreground a:hover,
#product-main-section .text-muted-foreground button:hover {
color: var(--a-red) !important;
transform: translateY(-2px);
}
}
/* ================================================================
56 — PHASE 3: VIDEO PREMIUM UPGRADE
Poster overlay · Play button · Enhanced glow · Depth
================================================================ */
/* Video card enhanced depth */
.video-wrapper {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04),
0 20px 60px rgba(0, 0, 0, 0.5);
transition: box-shadow var(--a-dur-slow) var(--a-ease);
}
@media (hover: hover) and (pointer: fine) {
.video-wrapper:hover {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
0 24px 80px rgba(0, 0, 0, 0.6),
0 0 80px rgba(220, 38, 38, 0.08);
}
}
/* Poster overlay */
.a-video-poster {
position: absolute;
inset: 0;
z-index: 3;
background: #000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity var(--a-dur-cinematic) var(--a-ease-out);
overflow: hidden;
}
.a-video-poster.is-playing {
opacity: 0;
pointer-events: none;
}
.a-video-poster-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.6;
transition: opacity var(--a-dur) var(--a-ease),
transform 10s var(--a-ease);
will-change: transform;
}
.a-video-poster:hover .a-video-poster-bg {
opacity: 0.7;
transform: scale(1.03);
}
/* Play button */
.a-video-play {
position: relative;
width: 68px;
height: 68px;
border-radius: var(--a-r-full);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--a-dur) var(--a-ease-out), transform var(--a-dur) var(--a-ease-out), box-shadow var(--a-dur) var(--a-ease-out);
z-index: 4;
}
.a-video-play svg {
width: 24px;
height: 24px;
color: #fff;
margin-left: 3px;
}
[dir="rtl"] .a-video-play svg {
margin-left: 0;
margin-right: 3px;
}
.a-video-poster:hover .a-video-play {
background: rgba(220, 38, 38, 0.25);
border-color: rgba(220, 38, 38, 0.35);
transform: scale(1.1);
box-shadow: 0 0 50px rgba(220, 38, 38, 0.2);
}
.a-video-poster:hover .a-video-play svg {
filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.4));
}
/* Play pulse ring */
.a-video-play::before {
content: '';
position: absolute;
inset: -6px;
border-radius: var(--a-r-full);
border: 1px solid rgba(255, 255, 255, 0.08);
animation: playPulse 2.5s var(--a-ease) infinite;
pointer-events: none;
will-change: transform, opacity;
}
@keyframes playPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.12); opacity: 0; }
}
@media (max-width: 430px) {
.a-video-play {
width: 56px;
height: 56px;
}
.a-video-play svg {
width: 20px;
height: 20px;
}
}
/* ================================================================
57 — PHASE 3: MICRO INTERACTIONS
ATC success · Button loading · Cart bump · Variant pulse
================================================================ */
/* ATC success state */
.a-btn-atc-success {
background: var(--a-green) !important;
color: #fff !important;
border-color: var(--a-green) !important;
pointer-events: none;
}
@keyframes atcCheckIn {
0% { transform: scale(0) rotate(-45deg); opacity: 0; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* Button loading spinner */
.a-btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.a-btn-loading::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: var(--a-r-full);
animation: btnSpin 600ms linear infinite;
}
@keyframes btnSpin {
to { transform: rotate(360deg); }
}
/* Cart badge bump */
@keyframes cartBump {
0% { transform: scale(1); }
30% { transform: scale(1.4); }
60% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.a-cart-bump {
animation: cartBump 400ms var(--a-ease-bounce) !important;
}
/* Variant switch pulse */
.a-variant-pulse {
animation: variantPulse 350ms var(--a-ease-out);
}
@keyframes variantPulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
100% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}
/* ================================================================
58 — PHASE 3: EMPTY STATES
Cart · Wishlist · 404 · No products
================================================================ */
.a-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--a-5xl) var(--a-xl);
min-height: 40vh;
gap: var(--a-md);
}
.a-empty-state__icon {
width: 56px;
height: 56px;
color: rgba(255, 255, 255, 0.1);
}
.a-empty-state__title {
font-size: var(--a-fz-section);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.75);
}
.a-empty-state__desc {
font-size: var(--a-fz-body);
color: rgba(255, 255, 255, 0.35);
max-width: 340px;
line-height: 1.65;
}
.a-empty-state .btn {
margin-top: var(--a-sm);
}
/* ================================================================
60 — PHASE 4.1: AMBIENT LIGHTING SYSTEM
Consistent cinematic glow language across all sections
Every section connected by ambient red glow · Never harsh
================================================================ */
.section-products::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 70%;
background: radial-gradient(
ellipse 60% 50% at center,
rgba(220, 38, 38, 0.025) 0%,
transparent 70%
);
pointer-events: none;
}
.section-benefits::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(
ellipse 60% 50% at center,
rgba(220, 38, 38, 0.03) 0%,
transparent 70%
);
pointer-events: none;
}
.section-testimonials::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(
ellipse 50% 40% at center,
rgba(220, 38, 38, 0.03) 0%,
transparent 70%
);
pointer-events: none;
}
.section-gallery::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(
ellipse 50% 40% at center,
rgba(220, 38, 38, 0.02) 0%,
transparent 70%
);
pointer-events: none;
}
.video-wrapper::before {
inset: -60px;
background: radial-gradient(
ellipse at center,
rgba(220, 38, 38, 0.08) 0%,
rgba(220, 38, 38, 0.025) 35%,
transparent 70%
);
opacity: 0.6;
}
@media (max-width: 767px) {
.video-wrapper::before {
display: none;
}
.section-products::before,
.section-benefits::before,
.section-testimonials::before,
.section-gallery::before {
display: none;
}
}
/* ================================================================
61 — PHASE 4.2: PREMIUM DEPTH SYSTEM
Cards as physical objects · Layered shadows · Elevation
================================================================ */
.section-benefits .flex.flex-col.items-center {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.06);
}
@media (hover: hover) and (pointer: fine) {
.section-benefits .flex.flex-col.items-center:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
0 8px 24px rgba(0, 0, 0, 0.15),
0 20px 48px rgba(0, 0, 0, 0.1),
0 0 60px rgba(220, 38, 38, 0.06);
}
}
.section-testimonials article {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.06);
}
@media (hover: hover) and (pointer: fine) {
.section-testimonials article:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
0 8px 24px rgba(0, 0, 0, 0.15),
0 20px 48px rgba(0, 0, 0, 0.1),
0 0 60px rgba(220, 38, 38, 0.05);
}
}
[data-product-card] a:first-child {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (hover: hover) and (pointer: fine) {
[data-product-card]:hover a:first-child {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
0 8px 24px rgba(0, 0, 0, 0.15),
0 20px 48px rgba(0, 0, 0, 0.1),
0 0 60px rgba(220, 38, 38, 0.05);
}
}
/* ================================================================
62 — PHASE 4.3: LUXURY GALLERY
Elegant framing · Cinematic zoom · Ambient glow · Border treatment
================================================================ */
.section-gallery .group {
border: 1px solid rgba(255, 255, 255, 0.04);
transition: border-color var(--a-dur) var(--a-ease),
box-shadow var(--a-dur-slow) var(--a-ease-out),
transform var(--a-dur-slow) var(--a-ease-out);
}
@media (hover: hover) and (pointer: fine) {
.section-gallery .group:hover {
border-color: rgba(220, 38, 38, 0.15);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 24px 64px rgba(0, 0, 0, 0.2),
0 0 60px rgba(220, 38, 38, 0.05);
transform: translateY(-6px);
}
}
.media-wrap img {
transition: transform 1.4s var(--a-ease-snap);
}
@media (hover: hover) and (pointer: fine) {
.section-gallery .group:hover .media-wrap img {
transform: scale(1.06);
}
}
.section-gallery .group::after {
content: '';
position: absolute;
inset: -24px;
background: radial-gradient(
ellipse at center,
rgba(220, 38, 38, 0.06) 0%,
transparent 70%
);
opacity: 0;
transition: opacity var(--a-dur-slow) var(--a-ease);
pointer-events: none;
z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
.section-gallery .group:hover::after {
opacity: 1;
}
}
.section-gallery .absolute.inset-0 {
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.8) 100%
);
}
/* ================================================================
63 — PHASE 4.4: VIDEO EXPERIENCE
Cinematic frame · Noise · Ambient red · Better ratios
================================================================ */
@media (min-width: 768px) {
.video-wrapper {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 767px) {
.video-wrapper {
aspect-ratio: 16 / 9;
max-height: none;
}
}
.video-wrapper::after {
background: radial-gradient(
ellipse at center,
transparent 55%,
rgba(0, 0, 0, 0.35) 100%
);
}
.video-wrapper .ascend-video-noise {
opacity: 0.35;
}
/* ================================================================
64 — PHASE 4.5: MICRO INTERACTIONS POLISH
Physical · Smooth · Premium · Responsive
================================================================ */
.btn:active {
transform: scale(0.97);
transition-duration: 80ms;
}
[data-product-card]:active a:first-child {
transform: scale(0.98) !important;
transition-duration: 80ms !important;
}
[data-wishlist-btn]:active {
transform: scale(0.85) !important;
transition-duration: 80ms !important;
}
@media (hover: none) {
.section-gallery .group:active .media-wrap img {
transform: scale(1.04) !important;
transition-duration: 80ms !important;
}
}
@media (hover: none) {
.section-benefits .flex.flex-col.items-center:active {
transform: scale(0.98) !important;
transition-duration: 80ms !important;
}
}
.a-scroll-top:active {
transform: scale(0.9) !important;
transition-duration: 80ms !important;
}
.whatsapp-fab:active {
transform: scale(0.9) !important;
transition-duration: 80ms !important;
}
.a-sticky-atc:active {
transform: scale(0.97) !important;
transition-duration: 80ms !important;
}
/* ================================================================
65 — PHASE 4.6: SECTION TRANSITIONS & FLOW
Gradient bleeds · Rhythm · One continuous story
================================================================ */
.section-products::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(220, 38, 38, 0.015) 50%,
transparent 100%
);
pointer-events: none;
}
.section-benefits::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15));
pointer-events: none;
}
.section-testimonials::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.12));
pointer-events: none;
}
.section-gallery::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.12));
pointer-events: none;
}
/* ================================================================
66 — PHASE 4.7: MOBILE LUXURY
Mobile-first audit · Nothing cramped · Premium at every size
================================================================ */
@media (max-width: 480px) {
.section-gallery .grid {
gap: var(--a-sm);
}
.section-gallery .group {
border-radius: var(--a-r-lg);
}
.section-benefits .flex.flex-col.items-center {
padding: var(--a-xl) var(--a-lg);
}
.section-gallery .group::after {
display: none;
}
.section-products::before,
.section-benefits::before,
.section-testimonials::before,
.section-gallery::before {
display: none;
}
}
@media (max-width: 380px) {
.section-benefits .flex.flex-col.items-center {
padding: var(--a-lg) var(--a-md);
}
.section-benefits svg {
width: 40px;
height: 40px;
}
.section-benefits h3 {
font-size: var(--a-fz-xs);
}
}
/* ================================================================
67 — PHASE 4.8: PREMIUM POLISH
Final consistency pass · Award-level refinement
================================================================ */
.section-carousel[data-variant="default"]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.95));
z-index: 5;
pointer-events: none;
}
.section-carousel[data-variant="default"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, transparent, rgba(10, 10, 10, 0.6));
z-index: 5;
pointer-events: none;
}
.a-marquee::before,
.a-marquee::after {
z-index: 2;
}
[data-reveal] {
will-change: opacity, transform;
}
/* ================================================================
68 — GALLERY MOBILE TAP-TO-REVEAL
On touch devices, tap gallery item to show caption overlay
================================================================ */
@media (hover: none) and (pointer: coarse) {
.section-gallery .absolute.inset-0 {
opacity: 1;
background: linear-gradient(
180deg,
transparent 30%,
rgba(0, 0, 0, 0.85) 100%
);
transition: opacity var(--a-dur) var(--a-ease);
}
.section-gallery .group.is-revealed .absolute.inset-0 {
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.9) 100%
);
}
}
/* ================================================================
67 — MOBILE TESTIMONIALS REBUILD
Premium centered carousel · One card at a time · Arrows below
================================================================ */
/* Tablet + Mobile: single centered card, arrows visible below */
@media (max-width: 768px) {
/* Section: balanced vertical rhythm + generous horizontal margins */
.section-testimonials {
padding-block: var(--a-xl);
}
/* Title: slightly smaller than desktop */
.section-testimonials h2 {
font-size: var(--a-fz-h3);
margin-bottom: var(--a-xl);
}
/* Carousel: single card centered with slight peek */
.section-testimonials .embla {
--slide-spacing: 1rem;
--slide-size-xs: 85%;
overflow: visible;
}
/* Reduce gap between carousel and controls (override space-y-6) */
.section-testimonials [data-carousel] > .flex:last-child {
margin-top: var(--a-md) !important;
}
/* Card: compact, square-ish like desktop */
.section-testimonials article {
padding: var(--a-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
/* Top red accent: visible on mobile (no hover) */
.section-testimonials article::before {
opacity: 0.5;
}
/* Decorative quote mark: refined */
.section-testimonials article::after {
font-size: 2.5rem;
top: var(--a-md);
right: var(--a-lg);
}
[dir="rtl"] .section-testimonials article::after {
right: auto;
left: var(--a-lg);
}
/* Stars: clean top, compact */
.section-testimonials [aria-label] {
margin-bottom: var(--a-sm);
}
.section-testimonials [aria-label] svg {
width: 16px;
height: 16px;
}
/* Quote: balanced, compact */
.section-testimonials article p {
font-size: var(--a-fz-sm);
line-height: 1.65;
margin-bottom: var(--a-md);
padding-left: var(--a-md);
}
[dir="rtl"] .section-testimonials article p {
padding-left: 0;
padding-right: var(--a-md);
}
/* Author row: tight bottom */
.section-testimonials .a-reviewer-row {
padding-top: var(--a-sm);
}
.section-testimonials .a-reviewer-avatar {
width: 34px;
height: 34px;
font-size: var(--a-fz-2xs);
}
/* ===== Show arrows below card (override hidden) ===== */
.section-testimonials [data-carousel] > .flex > .hidden {
display: flex;
}
/* Progress + arrows row: centered below card */
.section-testimonials [data-carousel] > .flex:last-child {
justify-content: center;
align-items: center;
gap: 0.75rem;
}
/* Progress bar: compact centered */
.section-testimonials .embla__progress {
width: 80px;
min-width: 60px;
}
/* Arrows: subtle, premium size */
.section-testimonials .embla__prev,
.section-testimonials .embla__next {
width: 36px;
height: 36px;
}
.section-testimonials .embla__prev svg,
.section-testimonials .embla__next svg {
width: 18px;
height: 18px;
}
}
/* Small mobile: tighter, more refined */
@media (max-width: 430px) {
.section-testimonials {
padding-inline: var(--a-sm);
}
.section-testimonials h2 {
font-size: var(--a-fz-body);
margin-bottom: var(--a-lg);
}
.section-testimonials .embla {
--slide-size-xs: 88%;
}
.section-testimonials article {
padding: var(--a-md);
}
.section-testimonials article::after {
font-size: 2rem;
top: var(--a-sm);
right: var(--a-md);
}
[dir="rtl"] .section-testimonials article::after {
right: auto;
left: var(--a-md);
}
.section-testimonials article p {
font-size: var(--a-fz-xs);
line-height: 1.55;
margin-bottom: var(--a-sm);
}
.section-testimonials .a-reviewer-avatar {
width: 30px;
height: 30px;
}
.section-testimonials .a-verified-badge {
font-size: 0.5625rem;
}
.section-testimonials .a-verified-badge svg {
width: 10px;
height: 10px;
}
.section-testimonials .embla__prev,
.section-testimonials .embla__next {
width: 32px;
height: 32px;
}
.section-testimonials .embla__prev svg,
.section-testimonials .embla__next svg {
width: 16px;
height: 16px;
}
}