needs explicit defeat for the CTA. */
.fusion-body .wsk-fs__text p,
.fusion-body .wsk-fs__body p {
font: inherit !important;
color: inherit !important;
margin: 0 !important;
background: transparent !important;
}
.fusion-body .wsk-fs a.wsk-fs__cta,
.fusion-body .wsk-fs a.wsk-fs__cta:link,
.fusion-body .wsk-fs a.wsk-fs__cta:visited,
.fusion-body .wsk-fs a.wsk-fs__cta:hover,
.fusion-body .wsk-fs a.wsk-fs__cta:focus,
.fusion-body .wsk-fs a.wsk-fs__cta:active {
color: var(--wsk-fs-text, #FFFFFF) !important;
text-decoration: none !important;
border-bottom: 0 !important;
}
/* ───────── 7. Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
.wsk-fs__cta,
.wsk-fs__prev,
.wsk-fs__next,
.wsk-fs__prev-title,
.wsk-fs__next-title {
transition-duration: 0.01ms !important;
}
}
/**
* WEPRO: Daily Routine — element stylesheet.
*
* Background video or image with an overlaid product/post card strip.
* The bg media persists across card swaps; cards live in a horizontal
* scroll rail with prev/next arrows on desktop and touch-scroll on
* mobile. The element owns its inner background; the section wrapper
* (Avada container) owns outer padding/border/shadow.
*
* Tokens (with fallback defaults):
* --wsk-dr-mh-d 700px desktop min-height
* --wsk-dr-mh-m 600px mobile min-height
* --wsk-dr-overlay-opacity 0 dark overlay strength (0–0.8)
* --wsk-dr-card-bg surface card background
* --wsk-dr-card-text text card text color
* --wsk-dr-card-radius 8px card corner radius
* --wsk-dr-card-image-h 110px square image side
* --wsk-dr-arrow-bg rgba(0,0,0,0.25) nav arrow background
* --wsk-dr-arrow-fg #ffffff nav arrow icon
* --wsk-dr-bag-bg text bag-icon button background
* --wsk-dr-bag-fg surface bag-icon button icon
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-dr {
position: relative;
isolation: isolate;
width: 100%;
min-height: var(--wsk-dr-mh-m, 600px);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
@media (min-width: 900px) {
.wsk-dr {
min-height: var(--wsk-dr-mh-d, 700px);
}
}
/* ══════════════════════════════════════════════════════════════════════
* Background layer (video / iframe / image).
* ══════════════════════════════════════════════════════════════════════ */
.wsk-dr__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.wsk-dr__bg video,
.wsk-dr__bg iframe,
.wsk-dr__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border: 0;
display: block;
}
.wsk-dr__bg iframe {
pointer-events: none;
/* Scale the YouTube iframe up to mask its UI chrome. */
transform: scale(1.4);
transform-origin: center center;
}
.wsk-dr__bg picture {
position: absolute;
inset: 0;
display: block;
}
.wsk-dr__bg-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, var(--wsk-dr-overlay-opacity, 0));
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════════
* Strip — horizontal scroll rail of product cards.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-dr__strip {
position: relative;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
padding: 0;
}
.wsk-dr__rail {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: visible;
padding: 20px 24px 24px 16px;
width: 100%;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
}
/* Desktop: large left padding pushes the first card to the right edge
of the viewport, so on load only 1 full card + half the next show
(the rest extend off-screen to the right and scroll into view).
Math: 1.5 cards × (380px card + 12px gap) ≈ 588px visible from the
right edge; everything left of that is padding. */
@media (min-width: 900px) {
.wsk-dr__rail {
padding: 24px 32px 28px calc(100% - 588px);
}
}
.wsk-dr__rail::-webkit-scrollbar {
display: none;
}
[dir="rtl"] .wsk-dr__rail {
flex-direction: row-reverse;
}
/* ══════════════════════════════════════════════════════════════════════
* Card.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-dr__card {
display: flex;
box-sizing: border-box;
padding: 8px;
background: var(--wsk-dr-card-bg, var(--wdt-color-surface, #ffffff));
color: var(--wsk-dr-card-text, var(--wdt-color-text, #1e293b));
min-height: 125px;
height: auto;
/* Mobile: each card is ~65vw so on load 1 full card + a clear half
of the next is visible (matches reference behavior). */
flex: 0 0 65vw;
max-width: 65vw;
border-radius: var(--wsk-dr-card-radius, var(--wdt-radius-md, 8px));
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
scroll-snap-align: start;
position: relative;
z-index: 2;
}
/* Desktop: fixed 380px card width matches the reference proportions.
Combined with the rail's large left padding, this yields 1 full card
+ half of the next card visible on load (matches reference). */
@media (min-width: 900px) {
.wsk-dr__card {
flex: 0 0 380px;
max-width: 380px;
min-height: 130px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
}
.wsk-dr__link {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
width: 100%;
text-decoration: none;
color: inherit;
outline: 0;
}
.fusion-row .wsk-dr a,
.fusion-row .wsk-dr a:link,
.fusion-row .wsk-dr a:visited {
color: inherit !important;
text-decoration: none !important;
}
.wsk-dr__pic {
flex-shrink: 0;
width: var(--wsk-dr-card-image-h, 110px);
height: var(--wsk-dr-card-image-h, 110px);
display: block;
position: relative;
background-color: transparent;
border-radius: var(--wsk-dr-card-radius, var(--wdt-radius-md, 8px));
overflow: hidden;
}
.wsk-dr__pic img {
width: 100%;
height: 100%;
box-sizing: border-box;
object-fit: cover;
object-position: center center;
display: block;
border-radius: var(--wsk-dr-card-radius, var(--wdt-radius-md, 8px));
}
.wsk-dr__body {
width: 140px;
text-align: start;
line-height: 1.1;
display: flex;
flex-direction: column;
}
@media (min-width: 900px) {
.wsk-dr__body {
width: 180px;
}
}
/* Locked-rule typography: badge / title / price use !important inline
styles in PHP to beat Avada's compiled fusion-styles cascade. The
rules below provide layout-only defaults (margin/clamp). */
.wsk-dr__badge {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.6;
margin-top: 6px;
margin-bottom: 0;
line-height: normal;
padding-right: 4px;
word-wrap: break-word;
}
[dir="rtl"] .wsk-dr__badge {
padding-right: 0;
padding-left: 4px;
}
.wsk-dr__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
max-height: 3em;
line-height: 1.2;
margin-top: 8px;
margin-bottom: 0;
padding-right: 4px;
}
[dir="rtl"] .wsk-dr__title {
padding-right: 0;
padding-left: 4px;
}
.wsk-dr__price {
margin-top: 8px;
margin-bottom: 4px;
}
.wsk-dr__price ins {
text-decoration: none;
}
/* ══════════════════════════════════════════════════════════════════════
* Bag icon button (Add to cart) — sits to the right of the card body.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-dr__bag {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
padding: 0;
margin-left: 8px;
margin-right: 4px;
border: 1px solid var(--wsk-dr-bag-bg, var(--wdt-color-text, #1e293b));
border-radius: var(--wsk-dr-card-radius, var(--wdt-radius-md, 8px));
background: var(--wsk-dr-bag-bg, var(--wdt-color-text, #1e293b));
color: var(--wsk-dr-bag-fg, var(--wdt-color-surface, #ffffff));
cursor: pointer;
-webkit-appearance: none;
transition: background 0.3s ease-in, color 0.3s ease-in, transform 0.2s ease;
}
.wsk-dr__bag:hover {
background: rgba(0, 0, 0, 0.85);
}
.wsk-dr__bag:focus-visible {
outline: 2px solid var(--wsk-dr-bag-bg, var(--wdt-color-text, #1e293b));
outline-offset: 2px;
}
.wsk-dr__bag svg {
width: 20px;
height: 20px;
display: block;
}
.wsk-dr__bag.is-pulse {
transform: scale(1.08);
}
/* ══════════════════════════════════════════════════════════════════════
* Card arrow (next-card) — sits next to the bag icon. Opt-in via
* `show_card_arrow` builder param.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-dr__card-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
padding: 0;
margin-left: 8px;
margin-right: 4px;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
color: var(--wsk-dr-card-text, var(--wdt-color-text, #1e293b));
cursor: pointer;
-webkit-appearance: none;
transition: background 0.25s ease-in, color 0.25s ease-in, transform 0.2s ease;
align-self: center;
}
.wsk-dr__card-arrow:hover {
background: var(--wsk-dr-card-text, var(--wdt-color-text, #1e293b));
color: var(--wsk-dr-card-bg, var(--wdt-color-surface, #ffffff));
}
.wsk-dr__card-arrow:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.wsk-dr__card-arrow svg {
width: 18px;
height: 18px;
display: block;
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-dr *,
.wsk-dr *::before,
.wsk-dr *::after {
animation: none !important;
transition: none !important;
}
.wsk-dr__rail {
scroll-behavior: auto;
}
}
/**
* WEPRO: Video Reels — element stylesheet.
*
* Vertical-aspect video reels carousel. Active slide grows the video to
* full height (80% → 100%) and fades the product card in (opacity 0 → 1);
* inactive slides keep the card hidden and the video shorter to draw the
* eye toward the centred active reel.
*
* Tokens (with fallback defaults):
* --wsk-vr-aspect 0.6 video aspect-ratio (w/h)
* --wsk-vr-image-aspect 0.6 image-only fallback aspect-ratio
* --wsk-vr-card-bg #ffffff card background
* --wsk-vr-card-text #1e293b card text color
* --wsk-vr-card-radius 8px card corner radius
* --wsk-vr-card-image-h 90px square thumbnail side
* --wsk-vr-bag-bg #1e293b bag-icon button background
* --wsk-vr-bag-fg #ffffff bag-icon button icon
* --wsk-vr-slides-d 3 slidesPerView desktop
* --wsk-vr-slides-m 1.2 slidesPerView mobile
* --wsk-vr-gap 24px space-between
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr {
position: relative;
width: 100%;
display: block;
color: var(--wsk-vr-card-text, var(--wdt-color-text, #1e293b));
}
/* ══════════════════════════════════════════════════════════════════════
* Swiper container.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__swiper {
position: relative;
width: 100%;
overflow: hidden;
}
.wsk-vr .swiper-wrapper {
align-items: center;
}
/* ══════════════════════════════════════════════════════════════════════
* Slide.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__slide {
width: 300px;
height: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media (min-width: 900px) {
.wsk-vr__slide {
width: 357px;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Video wrap — aspect-ratio framed; inactive slides shrink video to 80%.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__video-wrap {
width: 100%;
height: auto;
aspect-ratio: var(--wsk-vr-aspect, 0.6);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: var(--wsk-vr-card-radius, var(--wdt-radius-md, 8px));
margin-bottom: 16px;
position: relative;
}
/* Image-only slides use the dedicated image aspect var. */
.wsk-vr__video-wrap--image {
aspect-ratio: var(--wsk-vr-image-aspect, var(--wsk-vr-aspect, 0.6));
}
.wsk-vr__video-wrap > video,
.wsk-vr__video-wrap > picture {
display: block;
width: 100%;
height: 80%;
transition: height 0.3s ease-in-out;
border-radius: var(--wsk-vr-card-radius, var(--wdt-radius-md, 8px));
overflow: hidden;
position: relative;
}
.wsk-vr__video-wrap video,
.wsk-vr__video-wrap picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wsk-vr__slide.swiper-slide-active .wsk-vr__video-wrap > video,
.wsk-vr__slide.swiper-slide-active .wsk-vr__video-wrap > picture {
height: 100%;
}
/* ══════════════════════════════════════════════════════════════════════
* Sound toggle.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__sound-toggle {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 6;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
color: #fff;
cursor: pointer;
opacity: 0;
transform: scaleX(0);
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.wsk-vr__slide.swiper-slide-active .wsk-vr__sound-toggle {
opacity: 1;
transform: scaleX(1);
}
.wsk-vr__sound-toggle:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.wsk-vr__sound-toggle .wsk-vr__icon-sound-on,
.wsk-vr__sound-toggle .wsk-vr__icon-sound-off {
width: 20px;
height: 20px;
display: none;
}
.wsk-vr[data-sound="off"] .wsk-vr__icon-sound-off { display: block; }
.wsk-vr[data-sound="on"] .wsk-vr__icon-sound-on { display: block; }
/* ══════════════════════════════════════════════════════════════════════
* Card — fades in on the active slide.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__card {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
gap: 12px;
padding: 8px;
background: var(--wsk-vr-card-bg, var(--wdt-color-surface, #ffffff));
color: var(--wsk-vr-card-text, var(--wdt-color-text, #1e293b));
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--wsk-vr-card-radius, var(--wdt-radius-md, 8px));
min-height: 110px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease-out;
}
.wsk-vr__slide.swiper-slide-active .wsk-vr__card {
opacity: 1;
pointer-events: auto;
}
.wsk-vr__link {
display: flex;
gap: 12px;
width: 100%;
text-decoration: none;
color: inherit;
align-items: center;
}
.wsk-vr__pic {
flex: 0 0 auto;
display: block;
width: var(--wsk-vr-card-image-h, 90px);
height: var(--wsk-vr-card-image-h, 90px);
border-radius: calc(var(--wsk-vr-card-radius, 8px) / 2);
overflow: hidden;
}
.wsk-vr__pic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wsk-vr__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
word-break: break-word;
}
.wsk-vr__badge {
margin: 0;
}
.wsk-vr__title {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.wsk-vr__price {
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════════
* Bag button.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__bag {
flex: 0 0 auto;
align-self: center;
margin-right: 8px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
color: var(--wsk-vr-card-text, var(--wdt-color-text, #1e293b));
cursor: pointer;
transition: transform 0.2s ease-out, background 0.2s ease-in, color 0.2s ease-in;
}
.wsk-vr__bag:hover {
background: var(--wsk-vr-bag-bg, var(--wdt-color-text, #1e293b));
color: var(--wsk-vr-bag-fg, var(--wdt-color-surface, #ffffff));
}
.wsk-vr__bag.is-pulse { transform: scale(1.15); }
.wsk-vr__bag:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wsk-vr__bag svg { width: 18px; height: 18px; }
/* ══════════════════════════════════════════════════════════════════════
* Card next-arrow (optional).
* ══════════════════════════════════════════════════════════════════════ */
.wsk-vr__card-arrow {
flex: 0 0 auto;
align-self: center;
margin-right: 8px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
color: var(--wsk-vr-card-text, var(--wdt-color-text, #1e293b));
cursor: pointer;
transition: background 0.2s ease-in, color 0.2s ease-in;
}
.wsk-vr__card-arrow:hover {
background: var(--wsk-vr-card-text, var(--wdt-color-text, #1e293b));
color: var(--wsk-vr-card-bg, var(--wdt-color-surface, #ffffff));
}
.wsk-vr__card-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wsk-vr__card-arrow svg { width: 18px; height: 18px; }
/* ══════════════════════════════════════════════════════════════════════
* Swiper navigation buttons — top: 45% per ref.
* ══════════════════════════════════════════════════════════════════════ */
/* Luxury glass-effect nav buttons. Glass = backdrop-blur + translucent
white + subtle inner highlight + soft outer shadow. */
.wsk-vr__nav {
position: absolute;
top: 50%;
z-index: 10;
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
color: #111;
cursor: pointer;
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -1px 0 rgba(0, 0, 0, 0.10);
transform: translateY(-50%) scale(1);
opacity: 0;
pointer-events: none;
transition:
opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
background 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
/* Reveal nav buttons on hover or keyboard focus within the element. */
.wsk-vr:hover .wsk-vr__nav,
.wsk-vr:focus-within .wsk-vr__nav {
opacity: 1;
pointer-events: auto;
}
/* Coarse-pointer (touch) devices: keep nav softly visible since there's
no hover. Still kept lightweight so it doesn't dominate the slide. */
@media (hover: none) {
.wsk-vr__nav {
opacity: 0.85;
pointer-events: auto;
}
}
.wsk-vr__nav:hover {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(0, 0, 0, 0.32);
color: #000;
transform: translateY(-50%) scale(1.06);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.wsk-vr__nav:focus-visible {
outline: 2px solid rgba(0, 0, 0, 0.7);
outline-offset: 3px;
}
.wsk-vr__nav svg {
width: 22px;
height: 22px;
display: block;
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55));
}
.wsk-vr__nav--prev { left: 18px; }
.wsk-vr__nav--next { right: 18px; }
/* Mobile: smaller, hugged tighter. */
@media (max-width: 720px) {
.wsk-vr__nav {
width: 42px;
height: 42px;
}
.wsk-vr__nav svg { width: 18px; height: 18px; }
.wsk-vr__nav--prev { left: 10px; }
.wsk-vr__nav--next { right: 10px; }
}
.wsk-vr__nav.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
/* Swiper default arrow content suppression. */
.wsk-vr__nav.swiper-button-next::after,
.wsk-vr__nav.swiper-button-prev::after {
content: none;
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-vr *,
.wsk-vr *::before,
.wsk-vr *::after {
animation: none !important;
transition: none !important;
}
.wsk-vr video {
display: none !important;
}
}
/**
* WEPRO: Beauty Hero — element stylesheet.
*
* Cinematic full-viewport hero with image / video / YouTube background,
* centered headline + subtext, optional scroll-shrink effect on content,
* and an animated scroll-down indicator pinned at the bottom.
*
* Tokens (with fallback defaults):
* --wsk-bh-mh-d 800px min-height (desktop, when not full-viewport)
* --wsk-bh-mh-m 600px min-height (mobile, when not full-viewport)
* --wsk-bh-overlay-opacity 0.25 dark overlay strength (0–0.8)
* --wsk-bh-shrink-intensity 0.25 max content scale-down on scroll (0.05–0.6)
* --wsk-bh-scroll-progress 0 0..1 progress driver, written by JS
* --wsk-bh-scroll-fg #ffffff scroll indicator foreground color
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-bh {
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
min-height: var(--wsk-bh-mh-m, 600px);
display: block;
}
@media (min-width: 900px) {
.wsk-bh {
min-height: var(--wsk-bh-mh-d, 800px);
}
}
/* Full-viewport variant — declare 100vh first then 100svh so older
browsers without svh support fall back gracefully. */
.wsk-bh.is-full-viewport {
min-height: 100vh;
min-height: 100svh;
}
/* ══════════════════════════════════════════════════════════════════════
* Background layer.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-bh__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.wsk-bh__bg picture,
.wsk-bh__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.wsk-bh__bg picture img,
.wsk-bh__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border: 0;
display: block;
}
/* YouTube full-bleed cover — sized to whichever is larger of slot
width or slot height × 16/9, centered. The parent .wsk-bh__bg sets
`overflow: hidden`, which clips the iframe to the slot. */
.wsk-bh__yt-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-bh__yt-wrap iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio narrower than 16:9 */
height: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio wider than 16:9 */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.wsk-bh__bg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-bh-overlay-opacity, 0.25));
}
/* ══════════════════════════════════════════════════════════════════════
* Content — centered both axes, scroll-shrink driven by CSS var.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-bh__content {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: 1fr auto 1fr auto;
align-items: center;
justify-items: center;
gap: clamp(1rem, 2vw, 2rem);
padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
min-height: inherit;
text-align: center;
transform-origin: center center;
will-change: transform, opacity;
}
/* Headline goes to row 2 (centered), subtext goes to row 4 (bottom). */
.wsk-bh__headline {
grid-row: 2;
align-self: center;
}
.wsk-bh__subtext {
grid-row: 4;
align-self: end;
margin-bottom: clamp(6rem, 14vh, 10rem);
}
.wsk-bh.is-full-viewport .wsk-bh__content {
min-height: 100vh;
min-height: 100svh;
}
/* Scroll-shrink: pure transform-driven. No `position: sticky` because
Avada column wrappers apply `overflow: hidden` and fixed heights
that break the sticky containing block. JS writes
--wsk-bh-scroll-progress (0..1) on the root and CSS animates only
the headline. Subtext stays static so the user reads it cleanly
while the big headline slides down + shrinks past. */
.wsk-bh[data-shrink-on="yes"] .wsk-bh__headline {
transform:
translateY(calc(var(--wsk-bh-scroll-progress, 0) * 40vh))
scale(calc(1 - var(--wsk-bh-scroll-progress, 0) * var(--wsk-bh-shrink-intensity, 0.25)));
opacity: calc(1 - var(--wsk-bh-scroll-progress, 0) * 0.85);
will-change: transform, opacity;
transform-origin: center center;
}
/* Headline: width = container, text-align center. text-wrap: balance
gives nice line breaks; word-break: keep-all stops mid-word splits.
When a single word is wider than the viewport, overflow is allowed
to remain visible (the .wsk-bh root has overflow: hidden anyway). */
.wsk-bh__headline {
width: 100%;
max-width: 100%;
text-align: center;
text-wrap: balance;
overflow-wrap: normal;
}
/* Subtext: width-limited so long sentences wrap nicely. */
.wsk-bh__subtext {
max-width: min(700px, 90%);
padding-bottom: 0.5em;
border-bottom: 1px solid currentColor;
}
/* Subtext link styling. The single underline rule comes from the 's
border-bottom; link itself stays text-decoration-free to avoid a
double line. */
.wsk-bh__subtext-link {
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease;
}
.wsk-bh__subtext-link:hover,
.wsk-bh__subtext-link:focus-visible {
opacity: 0.85;
}
/* Avada-row override-guard: Avada forces link color via .fusion-row. */
.fusion-row .wsk-bh a,
.fusion-row .wsk-bh a:link,
.fusion-row .wsk-bh a:visited,
.fusion-row .wsk-bh a:hover {
color: inherit !important;
text-decoration: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
* Scroll indicator — pinned bottom-center, animated chevron + line.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-bh__scroll-indicator {
position: absolute;
bottom: clamp(1.5rem, 4vh, 3rem);
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 36px;
height: 56px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 28px;
background: rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--wsk-bh-scroll-fg, #ffffff);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
font: inherit;
}
.wsk-bh__scroll-indicator:hover,
.wsk-bh__scroll-indicator:focus-visible {
background: rgba(255, 255, 255, 0.22);
transform: translateX(-50%) translateY(-2px);
outline: none;
}
.wsk-bh__scroll-indicator:focus-visible {
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.wsk-bh__scroll-line {
width: 1px;
height: 16px;
background: currentColor;
opacity: 0.6;
transform-origin: top center;
animation: wsk-bh-scroll-pulse 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.wsk-bh__scroll-indicator svg {
display: block;
opacity: 0.85;
animation: wsk-bh-scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes wsk-bh-scroll-pulse {
0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 0.9; }
}
@keyframes wsk-bh-scroll-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile (<720px) polish.
* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.wsk-bh__content {
padding: clamp(1rem, 6vw, 2.5rem);
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.wsk-bh__scroll-indicator {
bottom: clamp(1rem, 3vh, 2rem);
width: 32px;
height: 50px;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion — disable scroll-shrink + indicator animations.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-bh__scroll-line,
.wsk-bh__scroll-indicator svg {
animation: none !important;
}
.wsk-bh[data-shrink-on="yes"] .wsk-bh__headline {
transform: none !important;
opacity: 1 !important;
}
.wsk-bh__subtext-link,
.wsk-bh__scroll-indicator {
transition: none !important;
}
}
/**
* WEPRO: Architecture Hero — element stylesheet.
*
* Cinematic full-viewport hero with image / video / YouTube background,
* left-edge vertical text rail, centered logo + description that gently
* track the cursor on hover.
*
* Tokens (with fallback defaults):
* --wsk-ah-mh-d 800px min-height (desktop, when not full-viewport)
* --wsk-ah-mh-m 600px min-height (mobile, when not full-viewport)
* --wsk-ah-overlay-opacity 0.25 dark overlay strength (0–0.8)
* --wsk-ah-rail-offset 24px edge-to-rail distance
* --wsk-ah-logo-max-w 360px max width of the logo image
* --wsk-ah-logo-max-h 360px max height of the logo image
* --wsk-ah-mx 0px JS-driven mouse-X offset on .wsk-ah__center
* --wsk-ah-my 0px JS-driven mouse-Y offset on .wsk-ah__center
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-ah {
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
min-height: var(--wsk-ah-mh-m, 600px);
display: block;
}
@media (min-width: 900px) {
.wsk-ah {
min-height: var(--wsk-ah-mh-d, 800px);
}
}
/* Full-viewport variant — declare 100vh first then 100svh so older
browsers without svh support fall back gracefully. */
.wsk-ah.is-full-viewport {
min-height: 100vh;
min-height: 100svh;
}
/* ══════════════════════════════════════════════════════════════════════
* Background layer.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-ah__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.wsk-ah__bg picture,
.wsk-ah__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.wsk-ah__bg picture img,
.wsk-ah__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border: 0;
display: block;
}
/* YouTube full-bleed cover — sized to whichever is larger of slot
width or slot height × 16/9, centered. The parent .wsk-ah__bg sets
`overflow: hidden`, which clips the iframe to the slot. */
.wsk-ah__yt-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-ah__yt-wrap iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio narrower than 16:9 */
height: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio wider than 16:9 */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.wsk-ah__bg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-ah-overlay-opacity, 0.25));
}
/* ══════════════════════════════════════════════════════════════════════
* Vertical text rail — pinned mid-height on the left or right edge.
* ══════════════════════════════════════════════════════════════════════ */
/* The rail uses native CSS vertical writing mode so the visible text
edge sits exactly at the configured offset from the viewport edge
regardless of font size. No rotation, no transform-origin overflow. */
.wsk-ah__rail {
position: absolute;
top: 50%;
z-index: 2;
pointer-events: none;
color: #ffffff;
transform: translateY(-50%);
max-height: 90%;
display: block;
}
.wsk-ah__rail--left {
left: var(--wsk-ah-rail-offset, 24px);
}
.wsk-ah__rail--right {
right: var(--wsk-ah-rail-offset, 24px);
}
.wsk-ah__rail-text {
display: block;
white-space: nowrap;
}
.wsk-ah__rail--left .wsk-ah__rail-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.wsk-ah__rail--right .wsk-ah__rail-text {
writing-mode: vertical-rl;
}
/* ══════════════════════════════════════════════════════════════════════
* Center: logo + description, cursor-driven parallax.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-ah__center {
position: absolute;
left: 0;
right: 0;
bottom: 20%;
z-index: 2;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
gap: clamp(1.5rem, 3vw, 3rem);
padding: clamp(1rem, 4vw, 3rem);
text-align: left;
color: #ffffff;
pointer-events: none;
will-change: transform;
transition: transform 100ms linear;
transform: translate3d(var(--wsk-ah-mx, 0px), var(--wsk-ah-my, 0px), 0);
}
/* Children are interactive (links must remain clickable). */
.wsk-ah__center > * {
pointer-events: auto;
}
.wsk-ah__logo {
display: flex;
justify-content: center;
align-items: center;
}
.wsk-ah__logo img {
display: block;
max-width: var(--wsk-ah-logo-max-w, 360px);
max-height: var(--wsk-ah-logo-max-h, 360px);
width: auto;
height: auto;
object-fit: contain;
}
.wsk-ah__description {
max-width: min(700px, 90%);
text-align: center;
text-wrap: pretty;
}
.wsk-ah__description-link {
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease;
}
.wsk-ah__description-link:hover,
.wsk-ah__description-link:focus-visible {
opacity: 0.85;
}
/* Avada-row override-guard: Avada forces link color via .fusion-row. */
.fusion-row .wsk-ah a,
.fusion-row .wsk-ah a:link,
.fusion-row .wsk-ah a:visited,
.fusion-row .wsk-ah a:hover {
color: inherit !important;
text-decoration: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile (<720px) polish — hide the vertical rail, scale logo down.
* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.wsk-ah__rail {
display: none;
}
/* Stack logo above description on mobile (single column). Logo
keeps its source order (it renders first in PHP), so column
direction puts it on top of the description naturally. */
.wsk-ah__center {
inset: 0;
bottom: 0;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.wsk-ah__logo img {
max-width: min(var(--wsk-ah-logo-max-w, 360px), 240px);
max-height: min(var(--wsk-ah-logo-max-h, 360px), 240px);
}
.wsk-ah__description {
font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
text-align: center;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Touch devices — no cursor to follow.
* ══════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
.wsk-ah__center {
transform: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-ah__center {
transition: none !important;
transform: none !important;
}
.wsk-ah__description-link {
transition: none !important;
}
}
/**
* WEPRO: Residences — element stylesheet.
*
* Scroll-takeover storytelling.
*
* Desktop: section is (slide-count × 100vh) tall; .wsk-res__stage is
* `position: sticky` for that distance. Each incoming slide is layered
* on top of the previous and revealed via a right-edge clip-path wipe
* driven by per-slide scroll fraction, written into a CSS custom
* property by JS. The underlying layer also gets a subtle scale-down
* so the new slide appears to push in.
*
* Intro slide overlays its title + subtitle directly on the bg
* (bottom-left, plain typography). Post slides use a dark caption card
* inset off the bottom-right corner with hover-expand 240→460px.
*
* Mobile: branched by [data-mobile-layout].
* stacked — uses the same scroll-takeover engine at 100dvh per
* slide. Each post wipes over the previous as the user
* scrolls.
* swipeable — intro hero, then a horizontal scroll-snap track with
* thumb tabs anchored inside each image at its bottom
* edge. Caption swaps below the image.
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res {
position: relative;
width: 100%;
color: #ffffff;
background: #000;
min-height: calc(var(--wsk-res-slide-count, 4) * 100vh);
min-height: calc(var(--wsk-res-slide-count, 4) * 100dvh);
}
/* ══════════════════════════════════════════════════════════════════════
* Desktop sticky stage.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__stage {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
isolation: isolate;
}
/* ── Slide stack ─────────────────────────────────────────────────── */
.wsk-res__slides {
position: absolute;
inset: 0;
z-index: 0;
}
/*
* Default slide: hidden via right-edge clip-path collapse, slightly
* scaled up so the reveal feels like a push-in. Once the slide
* becomes the active one, JS sets `--wsk-res-clip` on it (0..100)
* which opens the polygon's left edge from 100% → 0% as scroll
* progresses through that slide's segment.
*/
.wsk-res__slide {
position: absolute;
inset: 0;
z-index: 0;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.06);
transition:
clip-path 900ms cubic-bezier(0.25, 0.74, 0.22, 0.99),
transform 1200ms cubic-bezier(0.25, 0.74, 0.22, 0.99);
}
/* Slides that have already played stay fully visible underneath the
incoming slide. */
.wsk-res__slide.is-played {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1);
}
/* Active slide — JS continuously sets --wsk-res-clip (0..100, where
100 = fully visible). Convert to a polygon that opens its LEFT edge:
left edge x = (100 - clip)%. */
.wsk-res__slide.is-active {
z-index: 1;
clip-path: polygon(
calc((100 - var(--wsk-res-clip, 0)) * 1%) 0,
100% 0,
100% 100%,
calc((100 - var(--wsk-res-clip, 0)) * 1%) 100%
);
transform: scale(calc(1 + (1 - (var(--wsk-res-clip, 0) / 100)) * 0.06));
transition: clip-path 0ms linear, transform 0ms linear;
}
/* The intro slide is the very first; it starts already revealed —
never use the clip-path mask on it. */
.wsk-res__slide--intro {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1);
}
.wsk-res__slide--intro.is-active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1);
}
.wsk-res__slide-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.wsk-res__slide-bg picture,
.wsk-res__slide-bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.wsk-res__slide-bg picture img,
.wsk-res__slide-bg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* YouTube full-bleed cover — sized to whichever is larger of
container width or container height × 16/9, centered. The parent
.wsk-res__slide-bg / .wsk-res__mobile-intro-bg / .wsk-res__mobile-slide-bg
all set `overflow: hidden`, which clips the iframe to the slot. */
.wsk-res__yt-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-res__yt-wrap iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio narrower than 16:9 */
height: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio wider than 16:9 */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.wsk-res__slide-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-res-overlay-opacity, 0.25));
}
/* ══════════════════════════════════════════════════════════════════════
* Intro overlay — bottom-left, plain typography on bg.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__intro-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: clamp(2rem, 5vw, 5rem);
color: #ffffff;
pointer-events: none;
max-width: min(720px, 70%);
}
.wsk-res__intro-overlay > * {
pointer-events: auto;
}
.wsk-res__intro-title {
margin: 0 0 0.5em 0;
}
.wsk-res__intro-desc {
margin: 0;
max-width: min(540px, 100%);
opacity: 0.92;
}
.wsk-res__intro-button {
margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
/* ══════════════════════════════════════════════════════════════════════
* Vertical progress line — right edge, mid-stage.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__progress {
position: absolute;
right: clamp(20px, 2.5vw, 40px);
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 1.5px;
height: clamp(140px, 22vh, 240px);
background: rgba(255, 255, 255, 0.18);
pointer-events: none;
}
.wsk-res__progress-bar {
display: block;
width: 100%;
height: 5%;
background: var(--wsk-res-caption-btn, #ffffff);
transition: height 600ms cubic-bezier(0.25, 0.74, 0.22, 0.99);
transform-origin: top center;
}
/* ══════════════════════════════════════════════════════════════════════
* Caption card (post slides only) — inset off bottom-right corner.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__caption {
position: absolute;
right: clamp(20px, 3vw, 44px);
bottom: clamp(20px, 3vw, 44px);
z-index: 5;
width: clamp(260px, 22vw, 320px);
}
.wsk-res__caption-stack {
position: relative;
min-height: 184px;
}
.wsk-res__caption-card {
position: absolute;
inset: auto 0 0 0;
height: 184px;
overflow: hidden;
/* Hard glass: heavy backdrop blur + saturate, translucent fill,
thin top/inner highlight for the reflective rim. */
background: rgba(15, 30, 25, 0.42);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 24px 48px -16px rgba(0, 0, 0, 0.45);
color: var(--wsk-res-caption-text, #ffffff);
transition:
height 800ms cubic-bezier(0.25, 0.74, 0.22, 0.99),
opacity 400ms cubic-bezier(0.25, 0.74, 0.22, 0.99);
opacity: 0;
}
/* When the editor has set a custom solid bg color, fall back to
semi-transparent on top of it so the glass effect still works. */
.wsk-res__caption-card[style*="--wsk-res-caption-bg"],
.wsk-res .wsk-res__caption-card {
background: color-mix(in srgb, var(--wsk-res-caption-bg, #1f3b30) 55%, transparent);
}
.wsk-res__caption-card.is-active {
opacity: 1;
}
.wsk-res__caption-card[hidden] {
display: none !important;
}
.wsk-res__caption:hover .wsk-res__caption-card.is-active {
height: 340px;
}
.wsk-res__caption-card-content {
position: relative;
padding: 18px 22px 0;
display: flex;
flex-direction: column;
gap: 0.4em;
/* Reserve room above the divider line; line sits at top:108px so
content gets the upper section and the excerpt zone stays below. */
min-height: 108px;
}
.wsk-res__caption-card-type {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.wsk-res__caption-card-desc {
margin: 0;
opacity: 0.7;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hairline divider — pinned 108px from top of card (placement-from-
top, not bottom). Sits BELOW the desc, ABOVE the excerpt-reveal
area + button. */
.wsk-res__caption-card-line {
position: absolute;
left: 22px;
right: 22px;
top: 108px;
height: 1px;
background: var(--wsk-res-caption-line, rgba(255, 255, 255, 0.4));
}
/* Hover-revealed excerpt — collapsed by default. Lives between the
divider line and the button. Top padding clears the hairline. */
.wsk-res__caption-card-excerpt {
margin: 0;
padding: 26px 22px 0;
opacity: 0;
max-height: 0;
transform: translateY(-4px);
overflow: hidden;
transition:
opacity 400ms cubic-bezier(0.25, 0.74, 0.22, 0.99) 0ms,
transform 600ms cubic-bezier(0.25, 0.74, 0.22, 0.99) 0ms,
max-height 800ms cubic-bezier(0.25, 0.74, 0.22, 0.99) 0ms;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.wsk-res__caption:hover .wsk-res__caption-card.is-active .wsk-res__caption-card-excerpt {
opacity: 0.78;
max-height: 150px;
transform: translateY(0);
transition-delay: 200ms;
}
.wsk-res__caption-card-button {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 22px;
}
/* ══════════════════════════════════════════════════════════════════════
* Buttons — outline, letter-spaced uppercase.
* ══════════════════════════════════════════════════════════════════════ */
/* Slim text-button with an underline that animates from left edge.
No fill flip on hover — keeps the card calm on hover. */
.wsk-res__btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 6px 0 8px;
border: 0;
background: transparent;
color: var(--wsk-res-caption-btn, #ffffff);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
cursor: pointer;
overflow: hidden;
}
.wsk-res__btn::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: #ffffff;
opacity: 0.55;
}
.wsk-res__btn::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: #ffffff;
transform: scaleX(0);
transform-origin: right center;
transition: transform 400ms cubic-bezier(0.25, 0.74, 0.22, 0.99);
}
.wsk-res__btn:hover::after,
.wsk-res__btn:focus-visible::after {
transform: scaleX(1);
transform-origin: left center;
}
.wsk-res__btn:focus-visible {
outline: 2px solid var(--wsk-res-caption-btn, #ffffff);
outline-offset: 4px;
}
.wsk-res__btn--light {
color: #ffffff;
}
/* Avada-row override-guard. */
.fusion-row .wsk-res a,
.fusion-row .wsk-res a:link,
.fusion-row .wsk-res a:visited,
.fusion-row .wsk-res a:hover {
color: inherit !important;
text-decoration: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile shell — common.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__mobile {
display: none;
position: relative;
background: var(--wsk-res-caption-bg, #1f3b30);
color: var(--wsk-res-caption-text, #ffffff);
}
/* Intro hero block — title + subtitle on bg, full-bleed, ~100dvh. */
.wsk-res__mobile-intro {
position: relative;
overflow: hidden;
min-height: 100dvh;
background: #000;
}
.wsk-res__mobile-intro-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.wsk-res__mobile-intro-bg picture,
.wsk-res__mobile-intro-bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.wsk-res__mobile-intro-bg picture img,
.wsk-res__mobile-intro-bg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.wsk-res__mobile-intro-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-res-overlay-opacity, 0.25));
}
/* Intro overlay text on mobile sits TOP-left. */
.wsk-res__mobile-intro .wsk-res__intro-overlay {
bottom: auto;
/* Anchor the block roughly upper-third — under the menu, well
above the vertical centre. `top` uses dvh so it accounts for the
mobile chrome correctly. Override via --wsk-res-intro-top. */
top: calc(
env(safe-area-inset-top, 0px) +
var(--wsk-res-intro-top, clamp(7rem, 22dvh, 12rem))
);
max-width: 100%;
padding: 0 clamp(1.25rem, 5vw, 2rem) clamp(2rem, 7vw, 3.5rem);
}
.wsk-res__mobile-intro .wsk-res__intro-title {
font-size: clamp(2.75rem, 14vw, 4.5rem);
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile — STACKED variant.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__mobile-cards--stacked {
display: flex;
flex-direction: column;
gap: 0;
}
.wsk-res__mobile-stacked-card {
display: flex;
flex-direction: column;
background: transparent;
color: var(--wsk-res-caption-text, #ffffff);
margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
}
.wsk-res__mobile-stacked-image {
position: relative;
width: 100%;
height: clamp(280px, 62vw, 460px);
overflow: hidden;
background: #000;
}
.wsk-res__mobile-stacked-image .wsk-res__slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.wsk-res__mobile-stacked-image .wsk-res__slide-bg picture,
.wsk-res__mobile-stacked-image .wsk-res__slide-bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform-origin: center center;
will-change: transform;
}
.wsk-res__mobile-stacked-image .wsk-res__slide-bg picture img,
.wsk-res__mobile-stacked-image .wsk-res__slide-bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.wsk-res__mobile-stacked-image .wsk-res__mobile-slide-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-res-overlay-opacity, 0.25));
}
.wsk-res__mobile-stacked-body {
position: relative;
margin: -56px clamp(0.75rem, 4vw, 1.5rem) clamp(1rem, 4vw, 2rem);
padding: clamp(1.25rem, 5vw, 1.75rem) clamp(1.25rem, 5vw, 1.75rem) clamp(1.5rem, 5vw, 2rem);
z-index: 2;
/* Hard glass — same recipe as the desktop caption card. */
background: color-mix(in srgb, var(--wsk-res-caption-bg, #1f3b30) 55%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 24px 48px -16px rgba(0, 0, 0, 0.45);
}
/* Solid fallback when backdrop-filter isn't supported (older browsers). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.wsk-res__mobile-stacked-body {
background: var(--wsk-res-caption-bg, #1f3b30);
}
}
/* In the stacked layout, every card is permanently displayed (no
slide-in active toggle); override the mobile-caption-card display. */
.wsk-res__mobile-cards--stacked .wsk-res__mobile-caption-card {
display: block;
}
.wsk-res__mobile-cards--stacked .wsk-res__mobile-caption-card-content {
display: flex;
flex-direction: column;
gap: 0.4em;
margin-bottom: 18px;
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile — SWIPEABLE variant.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-res__mobile-cards--swipeable {
display: block;
}
/* Stage = image-area positioning context for the absolute tab strip. */
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-stage {
position: relative;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-track {
position: relative;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-track::-webkit-scrollbar {
display: none;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: center;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide-bg picture,
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide-bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide-bg picture img,
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide-bg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-slide-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-res-overlay-opacity, 0.25));
}
/* Tab strip — overlaid at the bottom of the image area (the stage,
not the cards section). Allows horizontal scroll-fit when total tab
text exceeds viewport width; otherwise distributes equally. */
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-stage .wsk-res__mobile-tabs {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
gap: 4px;
padding: 0 12px 12px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
pointer-events: auto;
}
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-stage .wsk-res__mobile-tabs::-webkit-scrollbar {
display: none;
}
.wsk-res__mobile-tab {
flex: 1 1 0;
min-width: 0;
max-width: 50%;
padding: 8px 4px;
background: transparent;
border: 0;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
opacity: 0.55;
transition:
opacity 300ms cubic-bezier(0.25, 0.74, 0.22, 0.99),
border-color 300ms cubic-bezier(0.25, 0.74, 0.22, 0.99);
}
.wsk-res__mobile-tab .wsk-res__mobile-tab-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsk-res__mobile-tab.is-active {
opacity: 1;
border-bottom-color: #ffffff;
}
.wsk-res__mobile-tab:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
/* Caption — outside the image area in swipeable, JS swaps active. */
.wsk-res__mobile-cards--swipeable .wsk-res__mobile-caption {
padding: 24px 20px 36px;
color: var(--wsk-res-caption-text, #ffffff);
}
.wsk-res__mobile-caption-card {
display: none;
position: relative;
}
.wsk-res__mobile-caption-card.is-active {
display: block;
}
.wsk-res__mobile-caption-card[hidden] {
display: none !important;
}
.wsk-res__mobile-caption-card-content {
display: flex;
flex-direction: column;
gap: 0.4em;
margin-bottom: 18px;
}
.wsk-res__mobile-caption-card-type {
margin: 0;
}
.wsk-res__mobile-caption-card-desc {
margin: 0;
opacity: 0.78;
}
.wsk-res__mobile-caption-card-line {
display: none;
}
.wsk-res__mobile-caption-card-button {
margin-top: 4px;
}
/* ══════════════════════════════════════════════════════════════════════
* Breakpoint switch — mobile under 980px.
*
* STACKED layout (default) keeps the desktop sticky scroll-takeover —
* each post wipes over the previous via the same clip-path mechanic
* (sticky 100dvh × N). Simpler mobile shell is only used when the
* editor picks SWIPEABLE.
* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 979px) {
/* Default stacked variant → uses the same scroll-takeover engine as
desktop. Stage stays visible, mobile shell stays hidden. We just
relax sticky height to use dvh (mobile-aware viewport units). */
.wsk-res[data-mobile-layout="stacked"] .wsk-res__stage,
.wsk-res:not([data-mobile-layout]) .wsk-res__stage {
height: 100dvh;
}
/* Caption card on mobile sits inset off the bottom; tighter clamps. */
.wsk-res[data-mobile-layout="stacked"] .wsk-res__caption,
.wsk-res:not([data-mobile-layout]) .wsk-res__caption {
right: clamp(16px, 5vw, 28px);
bottom: clamp(16px, 5vw, 28px);
width: clamp(240px, 78vw, 360px);
}
/* Right-edge progress line gets out of the way on narrow screens. */
.wsk-res[data-mobile-layout="stacked"] .wsk-res__progress,
.wsk-res:not([data-mobile-layout]) .wsk-res__progress {
right: 12px;
height: clamp(100px, 18vh, 160px);
}
/* Intro overlay on the very-first slide reflows to top-left so it
doesn't collide with the bottom-right caption card on mobile.
Sits roughly upper-third — well below any sticky menu. */
.wsk-res[data-mobile-layout="stacked"] .wsk-res__slide--intro .wsk-res__intro-overlay,
.wsk-res:not([data-mobile-layout]) .wsk-res__slide--intro .wsk-res__intro-overlay {
bottom: auto;
top: calc(env(safe-area-inset-top, 0px) + clamp(8rem, 24dvh, 13rem));
max-width: 100%;
padding: 0 clamp(1.25rem, 5vw, 2rem) 0;
}
/* Hide the simpler mobile shell on stacked — we use the stage. */
.wsk-res[data-mobile-layout="stacked"] .wsk-res__mobile,
.wsk-res:not([data-mobile-layout]) .wsk-res__mobile {
display: none;
}
/* SWIPEABLE variant → falls back to the simple horizontal carousel. */
.wsk-res[data-mobile-layout="swipeable"] {
min-height: 0;
}
.wsk-res[data-mobile-layout="swipeable"] .wsk-res__stage {
display: none;
}
.wsk-res[data-mobile-layout="swipeable"] .wsk-res__mobile {
display: block;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-res__slide,
.wsk-res__caption-card,
.wsk-res__progress-bar,
.wsk-res__btn,
.wsk-res__mobile-tab {
transition: none !important;
}
.wsk-res__slide {
transform: none !important;
}
.wsk-res__slide.is-active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
/**
* WEPRO: Wellness Hero — element stylesheet.
*
* Layout: full-bleed 100vh hero with three layers:
* 1. Background — photo via (also acts as fallback when
* WebGL is unavailable; hidden when the canvas is up)
* 2. Scene — WebGL canvas projecting the same image onto a
* deformable 3D plane
* 3. Content — body text bottom-left, title block bottom-right
*
* Mobile reflow:
* - Title block (title above subtitle) — top
* - Body text — vertically centred a bit below the middle
* - Photo full-bleed under everything
*
* Tokens (with fallback defaults):
* --wsk-wh-overlay-opacity 0
* --wsk-wh-title-color #e0d1b6
* --wsk-wh-subtitle-color #ffffff
* --wsk-wh-body-color #ffffff
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-wh {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
overflow: hidden;
color: #ffffff;
background: #0b1410;
isolation: isolate;
}
/* ══════════════════════════════════════════════════════════════════════
* Background layer.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-wh__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.wsk-wh__bg picture,
.wsk-wh__pic,
.wsk-wh__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.wsk-wh__bg picture img,
.wsk-wh__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* YouTube full-bleed cover — sized to whichever is larger of slot
width or slot height × 16/9, centered. The parent .wsk-wh__bg sets
`overflow: hidden`, which clips the iframe to the slot. */
.wsk-wh__yt-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-wh__yt-wrap iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio narrower than 16:9 */
height: 177.78%; /* 16/9 × 100 — beats any parent aspect ratio wider than 16:9 */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.wsk-wh__bg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-wh-overlay-opacity, 0));
}
/* ══════════════════════════════════════════════════════════════════════
* Scene layer — WebGL canvas.
*
* The canvas takes over for the bg once Three.js is up.
* The image is projected onto a deformable plane that breathes with
* noise displacement and tilts on hover.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-wh__scene {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: auto;
}
.wsk-wh__canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
/* Once the canvas is rendering the same image, hide the static
so we don't double-render. JS adds the class. */
.wsk-wh__bg.is-hidden-by-scene {
opacity: 0;
}
/* ══════════════════════════════════════════════════════════════════════
* Content overlays.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-wh__body,
.wsk-wh__title-block {
position: absolute;
z-index: 2;
pointer-events: none;
max-width: min(560px, 50%);
}
.wsk-wh__body > *,
.wsk-wh__title-block > * {
pointer-events: auto;
}
/* Body — bottom-left, well clear of the top menu. Pushed ~5vw
inward from the left edge so it sits in the inner third. */
.wsk-wh__body {
bottom: clamp(8rem, 28vh, 16rem);
left: clamp(2.5rem, 10vw, 7rem);
}
.wsk-wh__body-text {
margin: 0;
max-width: min(420px, 100%);
text-wrap: pretty;
}
/* Title block — bottom-right. Tight gap so subtitle sits close to
the title (~3% of vh). */
.wsk-wh__title-block {
right: clamp(1.5rem, 5vw, 4rem);
bottom: clamp(2rem, 6vh, 5rem);
text-align: right;
max-width: min(720px, 70%);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(0.25rem, 0.5vh, 0.5rem);
}
.wsk-wh__subtitle {
margin: 0;
}
.wsk-wh__title {
margin: 0;
display: block;
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile (≤ 720px) — single column reflow.
*
* Title on top
* Scene in the middle (kept full-bleed via the absolutely-
* positioned scene layer; just give it some breathing room
* between the reflowed text blocks)
* Body below the scene
* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* Mobile order matches the design:
1. Title block (title + subtitle below it) — top
2. Body text — vertically centered over the photo area
The bg / canvas remains full-bleed underneath. */
.wsk-wh {
min-height: 100dvh;
display: block;
padding-top: calc(env(safe-area-inset-top, 0px) + clamp(9rem, 27dvh, 14rem));
}
/* Title block — top-left, in document flow. */
.wsk-wh__title-block {
position: relative;
right: auto;
bottom: auto;
text-align: left;
align-items: flex-start;
padding: 0 clamp(1.25rem, 5vw, 2rem);
max-width: 100%;
gap: clamp(0.5rem, 1.5vw, 1rem);
}
/* Title above subtitle on mobile (ref pattern). */
.wsk-wh__title {
font-size: clamp(2.75rem, 13vw, 4.5rem) !important;
order: 1;
}
.wsk-wh__subtitle {
order: 2;
}
/* Body — anchored 20% below vertical center (i.e. ~70% from top). */
.wsk-wh__body {
position: absolute;
left: clamp(1.25rem, 5vw, 2rem);
right: clamp(1.25rem, 5vw, 2rem);
top: 70%;
transform: translateY(-50%);
bottom: auto;
max-width: 100%;
}
.wsk-wh__body-text {
font-size: clamp(0.9375rem, 4vw, 1rem) !important;
max-width: 100%;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-wh__canvas {
/* JS freezes the render loop on a single static frame. */
opacity: 1;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Avada-row override-guard — Avada forces link color in .fusion-row.
* ══════════════════════════════════════════════════════════════════════ */
.fusion-row .wsk-wh a,
.fusion-row .wsk-wh a:link,
.fusion-row .wsk-wh a:visited,
.fusion-row .wsk-wh a:hover {
color: inherit !important;
text-decoration: none !important;
}
/**
* WEPRO: Legacy Hero — element stylesheet.
*
* Layout values copied verbatim from the visual reference.
* Class-name mapping:
* .section1 -> .wsk-leh
* .section1Video -> .wsk-leh__bg video
* .section1Header -> .wsk-leh__content
* .section1HeaderGradient -> .wsk-leh__bg-gradient
* .section1HeaderLeft -> .wsk-leh__left
* .section1HeaderRight -> .wsk-leh__right
* .section1HeaderRightContent -> .wsk-leh__buttons
* #section1HeaderRightButton2 -> .wsk-leh__btn--secondary
* .section1Title -> .wsk-leh__title
* .section1Description -> .wsk-leh__body
* .section1TitleItalic -> .wsk-leh__title em
*/
/* Root — full-bleed breakout. */
.wsk-leh {
position: relative;
width: 100vw;
margin-inline: calc(50% - 50vw);
height: 100vh;
display: flex;
justify-content: flex-start;
overflow: hidden;
background-color: #000;
color: #ffffff;
isolation: isolate;
}
/* Background. */
.wsk-leh__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.wsk-leh__bg picture img,
.wsk-leh__bg video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center;
display: block;
z-index: 1;
}
/* YouTube full-bleed cover — sized to whichever is larger of
viewport width or viewport height × 16/9, centered. Guarantees no
letterboxing on portrait, square, or ultrawide viewports. */
.wsk-leh__yt-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-leh__yt-wrap iframe {
position: absolute;
top: 50%;
left: 50%;
width: max(100vw, calc(100vh * 16 / 9));
height: max(100vh, calc(100vw * 9 / 16));
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.wsk-leh__bg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-leh-overlay-opacity, 0.35));
z-index: 2;
}
/* Bottom-fade gradient — verbatim from .section1HeaderGradient. */
.wsk-leh__bg-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50vh;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
pointer-events: none;
z-index: 2;
}
/* Content layer = ref .section1Header (row, items flex-end, padding 5rem 5rem 7vh). */
.wsk-leh__content {
position: relative;
width: 100%;
height: 100dvh;
display: flex;
flex-direction: row;
align-items: flex-end;
padding: 5rem;
padding-bottom: 7vh;
z-index: 3;
overflow: visible;
pointer-events: none;
}
/* Left cell = .section1HeaderLeft. */
.wsk-leh__left {
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
pointer-events: auto;
}
/* Right cell = .section1HeaderRight + .section1HeaderRightContent merged.
Desktop stack: buttons on top, body description below.
Buttons align with the body's left edge. */
.wsk-leh__right {
display: flex;
flex: 0 0 auto;
margin-left: auto;
flex-direction: column-reverse;
align-items: flex-start;
justify-content: center;
gap: 1.5rem;
pointer-events: auto;
}
/* Buttons row = .section1HeaderRightContent.
Desktop: inline side-by-side. Mobile keeps row in the @media block. */
.wsk-leh__buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.75rem;
pointer-events: auto;
}
/* Title = .section1Title + .title.
Locked-rule pattern beats Avada theme typography cascade. */
.wsk-leh .wsk-leh__title,
.fusion-body .wsk-leh .wsk-leh__title,
.fusion-row .wsk-leh .wsk-leh__title {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
font-family: var(--wsk-leh-title-font-family, inherit) !important;
font-size: var(--wsk-leh-title-font-size, clamp(3rem, 4vw, 6.5rem)) !important;
font-weight: var(--wsk-leh-title-font-weight, 500) !important;
line-height: var(--wsk-leh-title-line-height, 1) !important;
letter-spacing: var(--wsk-leh-title-letter-spacing, -0.05em) !important;
text-transform: var(--wsk-leh-title-text-transform, none) !important;
color: var(--wsk-leh-title-color, #ffffff) !important;
}
/* Italic accent inside title = .section1TitleItalic. */
.wsk-leh .wsk-leh__title em,
.wsk-leh .wsk-leh__title i,
.fusion-body .wsk-leh .wsk-leh__title em,
.fusion-body .wsk-leh .wsk-leh__title i {
font-style: italic !important;
font-family: var(--wsk-leh-title-italic-font-family, inherit) !important;
margin-right: 0.02em;
margin-left: 0.25em;
}
/* Word splitter — atomic inline-block so a word never breaks
mid-character. The browser is only allowed to wrap between words
(where the splitter leaves plain whitespace text nodes). */
.wsk-leh__word {
display: inline-block;
white-space: nowrap;
}
/* Char-by-char blur-fade reveal — JS splits the title into
with staggered transition-delay set
inline, then toggles .is-revealed on the root. Mirrors the GSAP
stagger pattern from the visual reference (blur 8 → 0, opacity 0
→ 1, duration 500ms, stagger 50ms). */
.wsk-leh__char {
display: inline-block;
opacity: 0;
filter: blur(8px);
transition:
opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: opacity, filter;
}
.wsk-leh.is-revealed .wsk-leh__char {
opacity: 1;
filter: blur(0);
}
/* Subtitle, body, buttons — parallel fade-up reveal. */
.wsk-leh__subtitle,
.wsk-leh__body,
.wsk-leh__buttons {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms cubic-bezier(0.25, 0.74, 0.22, 0.99) 200ms,
transform 700ms cubic-bezier(0.25, 0.74, 0.22, 0.99) 200ms;
will-change: opacity, transform;
}
.wsk-leh.is-revealed .wsk-leh__subtitle,
.wsk-leh.is-revealed .wsk-leh__body,
.wsk-leh.is-revealed .wsk-leh__buttons {
opacity: 1;
transform: translateY(0);
}
/* Reduced-motion / live-editor short-circuit — JS adds is-no-anim
together with is-revealed when the reduced-motion media query
matches; we land on the final state with no transition. */
.wsk-leh.is-no-anim .wsk-leh__char,
.wsk-leh.is-no-anim .wsk-leh__subtitle,
.wsk-leh.is-no-anim .wsk-leh__body,
.wsk-leh.is-no-anim .wsk-leh__buttons {
transition: none !important;
}
/* Subtitle (eyebrow) — small uppercase line. */
.wsk-leh .wsk-leh__subtitle,
.fusion-body .wsk-leh .wsk-leh__subtitle,
.fusion-row .wsk-leh .wsk-leh__subtitle {
margin: 0 0 0.25rem 0 !important;
padding: 0 !important;
text-align: left !important;
font-family: var(--wsk-leh-subtitle-font-family, inherit) !important;
font-size: var(--wsk-leh-subtitle-font-size, 0.85rem) !important;
font-weight: var(--wsk-leh-subtitle-font-weight, 500) !important;
letter-spacing: var(--wsk-leh-subtitle-letter-spacing, 0.18em) !important;
text-transform: var(--wsk-leh-subtitle-text-transform, uppercase) !important;
line-height: var(--wsk-leh-subtitle-line-height, 1.5) !important;
color: var(--wsk-leh-subtitle-color, #ffffff) !important;
opacity: 0.85;
}
/* Description = .section1Description + .description.
Locked-rule pattern beats Avada theme typography cascade. */
.wsk-leh .wsk-leh__body,
.fusion-body .wsk-leh .wsk-leh__body,
.fusion-row .wsk-leh .wsk-leh__body {
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 320px;
text-align: left !important;
font-family: var(--wsk-leh-body-font-family, inherit) !important;
font-size: var(--wsk-leh-body-font-size, clamp(0.95rem, 1.62vw, 1.18rem)) !important;
font-weight: var(--wsk-leh-body-font-weight, 400) !important;
line-height: var(--wsk-leh-body-line-height, 1.4) !important;
letter-spacing: var(--wsk-leh-body-letter-spacing, 0) !important;
text-transform: var(--wsk-leh-body-text-transform, none) !important;
color: var(--wsk-leh-body-color, #ffffffc0) !important;
}
/* Buttons — ref recipe:
fixed 42px height, 0 20px padding, 5px gap, font 14px,
pill (border-radius: 9999px), transition all 0.3s ease.
Primary = soft-white pill with depth shadow + 2px hover lift.
Secondary = glass wrapper: backdrop-blur 20px + saturate 140%,
translucent fill, hairline border, layered drop+inner-rim shadow.
Locked-rule pattern beats Avada theme link/button typography cascade. */
.wsk-leh .wsk-leh__btn,
.fusion-body .wsk-leh .wsk-leh__btn,
.fusion-row .wsk-leh .wsk-leh__btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 5px;
height: 42px;
padding: 0 20px !important;
border: 0 !important;
border-radius: 9999px !important;
font-family: var(--wsk-leh-btn-font-family, inherit) !important;
font-size: var(--wsk-leh-btn-font-size, 14px) !important;
font-weight: var(--wsk-leh-btn-font-weight, 500) !important;
line-height: 1 !important;
letter-spacing: var(--wsk-leh-btn-letter-spacing, 0) !important;
text-transform: var(--wsk-leh-btn-text-transform, none) !important;
text-decoration: none !important;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
transition: all 300ms ease;
}
.wsk-leh__btn:focus-visible {
outline: 2px solid var(--wsk-leh-focus-ring, #ffffff);
outline-offset: 3px;
}
.wsk-leh__btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
flex-shrink: 0;
transition: transform 300ms ease;
}
.wsk-leh__btn-icon svg {
width: 100%;
height: 100%;
display: block;
}
.wsk-leh__btn-text {
white-space: nowrap;
font-weight: 500;
}
/* Primary — soft off-white pill with a depth shadow that lifts on hover. */
.wsk-leh__btn--primary {
background: var(--wsk-leh-btn-primary-bg, #f5f5f0);
color: var(--wsk-leh-btn-primary-text, #000000);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.wsk-leh__btn--primary:hover {
background: #e5e5e0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
/* Secondary — glass: heavy backdrop blur + saturate, translucent fill,
thin top inner-highlight rim, deep ambient drop shadow. */
.wsk-leh__btn--secondary {
background: var(--wsk-leh-btn-secondary-bg, rgba(200, 200, 200, 0.1));
color: var(--wsk-leh-btn-secondary-text, #ffffff);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wsk-leh__btn--secondary:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
.wsk-leh__btn--secondary {
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
}
}
/* Avada link-cascade neutraliser — Avada forces link colour and underline. */
.fusion-row .wsk-leh a {
text-decoration: none !important;
}
.fusion-row .wsk-leh .wsk-leh__btn--primary {
color: var(--wsk-leh-btn-primary-text, #000000) !important;
}
.fusion-row .wsk-leh .wsk-leh__btn--secondary {
color: var(--wsk-leh-btn-secondary-text, #ffffff) !important;
}
/* Desktop button visibility — secondary hidden on desktop, mirrors
#section1HeaderRightButton2 { display: none } from the ref. */
.wsk-leh--desktop-primary_only .wsk-leh__btn--secondary {
display: none;
}
/* Mobile / narrow (max-width: 1024px) — matches the visual reference breakpoint.
.section1Header -> flex-direction: column; align-items: center; padding 3vh
.section1HeaderGradient -> height 70vh; full opaque bottom
.section1HeaderLeft / Right -> reset to full-width centered cells
.section1Title/Description -> text-align: center
.section1HeaderRightContent -> flex-direction: column-reverse; align-items: stretch
#section1HeaderRightButton2 -> display: flex (visible on narrow) */
@media (max-width: 1024px) {
.wsk-leh__content {
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 3vh 1.25rem;
gap: 2rem;
}
.wsk-leh__bg-gradient {
height: 70vh;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 100%);
}
.wsk-leh__left {
flex: 0 0 auto;
align-items: center;
width: 100%;
overflow: hidden;
}
.wsk-leh__right {
flex: 0 0 auto;
margin-left: 0;
flex-direction: column;
align-items: stretch;
width: 100%;
}
.wsk-leh__title,
.wsk-leh__body,
.wsk-leh__subtitle {
text-align: center;
}
.wsk-leh__body {
max-width: none;
margin-left: auto;
margin-right: auto;
}
.wsk-leh__buttons {
flex-direction: row;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
gap: 0.75rem;
width: 100%;
}
.wsk-leh__btn {
flex: 1 1 0;
min-width: 0;
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
}
.wsk-leh__btn-text {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.wsk-leh--desktop-primary_only .wsk-leh__btn--secondary {
display: inline-flex;
}
}
/* Reduced motion — also force reveal-state final values so users with
reduce-motion never see a frozen pre-reveal title. */
@media (prefers-reduced-motion: reduce) {
.wsk-leh__btn {
transition: none !important;
}
.wsk-leh__btn:hover {
transform: none !important;
}
.wsk-leh__char,
.wsk-leh__subtitle,
.wsk-leh__body,
.wsk-leh__buttons {
opacity: 1 !important;
filter: none !important;
transform: none !important;
transition: none !important;
}
}
/**
* WEPRO: Manifesto — element stylesheet.
*
* Layout values lifted from the visual reference:
* .section3 -> .wsk-mfst
* .section3Content -> .wsk-mfst__stage
* .section3Video / picture -> .wsk-mfst__bg .wsk-mfst__video / __pic
* .section3BeliefsTitle -> .wsk-mfst__eyebrow
* .section3Text -> .wsk-mfst__items-viewport
* .section3TextItems -> .wsk-mfst__items
* .section3TextItem -> .wsk-mfst__item
* .section3TextItemItalic -> .wsk-mfst__item em
* .section3Button (.glass) -> .wsk-mfst__btn
*
* Mechanics:
* - Outer .wsk-mfst is 325vh tall to give the sticky stage a long
* scroll runway.
* - .wsk-mfst__stage is `position: sticky; top: 0; height: 100vh`
* and remains pinned for the duration.
* - JS writes per-item inline styles (rotateX/scale/blur/opacity)
* based on each item's distance from the column center, plus
* a translateY on .wsk-mfst__items so the stack scrolls through.
* - JS also sets a CSS variable `--wsk-mfst-zoom` on the bg layer
* so the video/image scales from a starter inset (~80% width with
* border-radius 10px) to full-bleed across the scroll.
*/
/* ══════════════════════════════════════════════════════════════════════
* Root.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-mfst {
position: relative;
width: 100%;
min-height: 325vh;
color: #ffffff;
background: #000;
isolation: isolate;
}
/* Sticky stage. */
.wsk-mfst__stage {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 1;
}
/* ══════════════════════════════════════════════════════════════════════
* Background layer (video / picture / youtube).
*
* Verbatim from the ref: starts as a centred rectangle at the same
* width as the page's content row (clamp 720px / 88vw / 1200px to
* mirror the ref's section2Cards max-width:1200px), height 100vh,
* border-radius 10px, hairline border. JS interpolates `width` from
* that starter to 100vw across the zoom-in phase, then back at the
* zoom-out phase. Height is never animated.
*
* On viewports under 1024px the bg is full-bleed always (no inset).
* ══════════════════════════════════════════════════════════════════════ */
.wsk-mfst__bg {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: var(--wsk-mfst-bg-width, clamp(720px, 88vw, 1200px));
height: 100vh;
height: 100dvh;
border-radius: var(--wsk-mfst-bg-radius, 10px);
border: var(--wsk-mfst-bg-border, 1px) solid rgba(255, 255, 255, 0.15);
overflow: hidden;
opacity: 0.5;
z-index: 0;
will-change: width, border-radius;
}
.wsk-mfst__bg picture,
.wsk-mfst__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.wsk-mfst__bg picture img,
.wsk-mfst__bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* YouTube full-bleed cover — same pattern as Legacy / Wellness / Beauty / Architecture. */
.wsk-mfst__yt-wrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-mfst__yt-wrap iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78%;
height: 177.78%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.wsk-mfst__bg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(0, 0, 0, var(--wsk-mfst-overlay-opacity, 0.5));
z-index: 1;
}
/* ══════════════════════════════════════════════════════════════════════
* Content stack — eyebrow + items viewport + button.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-mfst__content {
position: relative;
z-index: 2;
width: 100%;
max-width: 100vw;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5vh 1.25rem;
pointer-events: none;
}
.wsk-mfst__content > * {
pointer-events: auto;
}
/* ── Eyebrow ── */
.wsk-mfst .wsk-mfst__eyebrow,
.fusion-body .wsk-mfst .wsk-mfst__eyebrow,
.fusion-row .wsk-mfst .wsk-mfst__eyebrow {
margin: 0 0 5vh 0 !important;
padding: 0 !important;
text-align: center !important;
font-family: var(--wsk-mfst-eyebrow-font-family, inherit) !important;
font-size: var(--wsk-mfst-eyebrow-font-size, clamp(0.9rem, 1.1vw, 1.1rem)) !important;
font-weight: var(--wsk-mfst-eyebrow-font-weight, 500) !important;
letter-spacing: var(--wsk-mfst-eyebrow-letter-spacing, 0.07em) !important;
text-transform: var(--wsk-mfst-eyebrow-text-transform, uppercase) !important;
line-height: var(--wsk-mfst-eyebrow-line-height, 1.2) !important;
color: var(--wsk-mfst-eyebrow-color, #ffffff) !important;
}
/* ── Items viewport ── */
.wsk-mfst__items-viewport {
position: relative;
width: 100%;
max-width: 100vw;
height: 20vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
z-index: 1;
}
.wsk-mfst__items {
flex-shrink: 0;
display: flex;
max-width: 100vw;
flex-direction: column;
align-items: center;
height: auto;
min-height: max-content;
will-change: transform;
}
/* Each item — JS writes the per-item inline transform/filter/opacity. */
.wsk-mfst .wsk-mfst__item,
.fusion-body .wsk-mfst .wsk-mfst__item,
.fusion-row .wsk-mfst .wsk-mfst__item {
flex-shrink: 0;
min-height: 10vh;
display: block;
width: 100%;
margin: 0 !important;
padding: 0 2rem !important;
font-family: var(--wsk-mfst-item-font-family, inherit) !important;
font-size: var(--wsk-mfst-item-font-size, clamp(2rem, 2.2vw, 4.2rem)) !important;
font-weight: var(--wsk-mfst-item-font-weight, 500) !important;
line-height: var(--wsk-mfst-item-line-height, 1.2) !important;
letter-spacing: var(--wsk-mfst-item-letter-spacing, -0.03em) !important;
text-transform: var(--wsk-mfst-item-text-transform, none) !important;
text-align: center !important;
color: var(--wsk-mfst-item-color, #ffffff) !important;
transform-style: preserve-3d;
will-change: transform, filter, opacity;
}
.wsk-mfst__item em,
.wsk-mfst__item i {
font-style: italic;
font-family: var(--wsk-mfst-item-italic-font-family, inherit);
color: var(--wsk-mfst-item-italic-color, inherit);
letter-spacing: -0.05em;
margin-left: 0.1em;
margin-right: 0.1em;
}
/* Whole-item link wrapper inherits typography from the parent. */
.wsk-mfst__item-link {
color: inherit !important;
text-decoration: none !important;
}
/* Avada-cascade neutraliser on links inside the element. */
.fusion-row .wsk-mfst a,
.fusion-row .wsk-mfst a:link,
.fusion-row .wsk-mfst a:visited,
.fusion-row .wsk-mfst a:hover {
color: inherit !important;
text-decoration: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
* Glass CTA button — same recipe as Legacy Hero secondary.
* ══════════════════════════════════════════════════════════════════════ */
.wsk-mfst__cta {
margin-top: 5vh;
display: flex;
justify-content: center;
}
.wsk-mfst .wsk-mfst__btn,
.fusion-body .wsk-mfst .wsk-mfst__btn,
.fusion-row .wsk-mfst .wsk-mfst__btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 7px;
height: 45px;
padding: 0 24px !important;
border: 1px solid var(--wsk-mfst-btn-border, rgba(255, 255, 255, 0.2)) !important;
border-radius: 9999px !important;
background: var(--wsk-mfst-btn-bg, rgba(200, 200, 200, 0.1));
color: var(--wsk-mfst-btn-text, #ffffff) !important;
font-family: var(--wsk-mfst-btn-font-family, inherit) !important;
font-size: var(--wsk-mfst-btn-font-size, 15px) !important;
font-weight: var(--wsk-mfst-btn-font-weight, 500) !important;
line-height: 1 !important;
letter-spacing: var(--wsk-mfst-btn-letter-spacing, 0) !important;
text-transform: var(--wsk-mfst-btn-text-transform, none) !important;
text-decoration: none !important;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: all 300ms ease;
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
.wsk-mfst__btn {
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
}
}
.wsk-mfst__btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.wsk-mfst__btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.wsk-mfst__btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
flex-shrink: 0;
transition: transform 300ms ease;
}
.wsk-mfst__btn-icon svg {
width: 100%;
height: 100%;
display: block;
}
.wsk-mfst__btn-text {
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════════
* Mobile / narrow (≤ 1024px).
*
* The 3D card-flip is too tight to read on small screens. We keep the
* sticky stage and the scroll cycling, but switch the per-item visual
* to a softer fade-only (no perspective, no scale, no blur).
* Background also drops the zoom — full-bleed always.
* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.wsk-mfst {
min-height: 280vh;
}
/* Mobile keeps the same open-from-center / close-to-center
mechanic — only the starter rect is narrower (80vw) so the
inset is visible on phones. JS still drives `width` across
the scroll; CSS just sets the default starter via the same
`--wsk-mfst-bg-width` var. */
.wsk-mfst__bg {
--wsk-mfst-bg-width: 80vw;
}
.wsk-mfst .wsk-mfst__item,
.fusion-body .wsk-mfst .wsk-mfst__item,
.fusion-row .wsk-mfst .wsk-mfst__item {
font-size: var(--wsk-mfst-item-font-size, clamp(1.6rem, 5vw, 2.6rem)) !important;
padding: 0 1.25rem !important;
}
.wsk-mfst__items-viewport {
height: 18vh;
}
.wsk-mfst__cta {
width: 100%;
}
.wsk-mfst__btn {
width: auto;
}
}
/* ══════════════════════════════════════════════════════════════════════
* Reduced motion — flatten everything to a static list.
* ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.wsk-mfst {
min-height: 0;
}
.wsk-mfst__stage {
position: relative;
height: auto;
padding: 8vh 0;
}
.wsk-mfst__bg {
position: absolute;
left: 0;
top: 0;
transform: none;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
border: 0 !important;
}
.wsk-mfst__items-viewport {
height: auto;
overflow: visible;
}
.wsk-mfst__items {
transform: none !important;
}
.wsk-mfst__item {
min-height: 0 !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
margin: 0.5em 0 !important;
}
.wsk-mfst__btn {
transition: none !important;
}
}
/**
* WEPRO: American Hero
*
* Full-viewport (100svh) cinematic hero. Layout values lifted from the
* editorial-cinematic reference: 8-column grid, three rows (title / hr /
* footer), with copyright bottom-left and eyebrow bottom-right. Same
* structure across desktop / tablet / mobile — clamp() typography +
* vw-fluid padding scale fluidly without breakpoint-driven reflow.
*
* Cascade-beat: every editor-tunable typography property uses
* `var(--wsk-ah-X-PROP, REF_DEFAULT) !important` so Avada's compiled
* dynamic CSS cannot override the locked-rule values.
*
* @package WeProStarterKit
*/
/* ──────────────────────────────────────────────────────────
* Layout
* ────────────────────────────────────────────────────────── */
.wsk-ah {
--wsk-ah-color: #ffffff;
--wsk-ah-color-bg: #010101;
--wsk-ah-overlay-color: var(--wsk-ah-color-bg);
--wsk-ah-overlay-opacity: 0.50;
--wsk-ah-hr: color-mix(in srgb, transparent, currentColor 20%);
position: relative;
display: block;
width: 100%;
height: calc(100 * var(--svh, 1svh));
background-color: #000;
color: var(--wsk-ah-color);
overflow: hidden;
isolation: isolate;
}
/* ──────────────────────────────────────────────────────────
* Background media — image / video / YouTube
* ────────────────────────────────────────────────────────── */
.wsk-ah__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.wsk-ah__pic,
.wsk-ah__pic img,
.wsk-ah__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* YouTube cover-fit (skill rule #45a viewport-sized variant).