/**
* VIO Image Interactive (Treatment Map) — style.css
*
* Layout, color, and interaction only. Typography (font-family, font-size,
* font-weight, line-height, letter-spacing, text-transform, font-style) is
* inherited entirely from the global theme so headings, body copy, and
* buttons match the rest of the site without any block-local overrides.
*
* Per-element class names map onto matching global classes where possible:
* .vio-im__title ← also tagged .vio-section__title (inherits h2 styling)
* .vio-im__intro ← also tagged .vio-section__lead (inherits lead styling)
* .vio-im__cta-btn-wrap → wraps a .vio-btn--primary (global button styles)
*/
/* ── Section frame ───────────────────────────────────────────────────────── */
/* Wider than the legacy 1100px so each 50% column has real estate to feel
like a true split (matches the Basic Callout 50/50 + Accordion patterns).
Centered with auto margins so the whole module sits in the middle of
the page regardless of viewport width. */
.vio-image-interactive .vio-image-interactive__body {
max-width: 1400px;
margin: 0 auto;
padding: 0;
}
/* ── Module header ───────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__eyebrow {
color: var(--wp--preset--color--vio-mouse, #B29D92);
margin-bottom: 12px;
}
.vio-image-interactive .vio-im__title {
margin: 0 0 14px;
}
.vio-image-interactive .vio-im__intro {
max-width: 580px;
margin: 0 0 28px;
}
/* ── Pill switcher ───────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 40px;
}
.vio-image-interactive .vio-im__pill {
padding: 7px 16px;
border: 0.5px solid var(--wp--preset--color--vio-mtn-greige, #E9E3DC);
border-radius: 20px;
background: #FFFFFF;
color: #725C50;
cursor: pointer;
transition: all 0.15s ease;
}
.vio-image-interactive .vio-im__pill:hover {
border-color: var(--wp--preset--color--vio-mouse, #B29D92);
color: var(--wp--preset--color--vio-ink, #030303);
}
.vio-image-interactive .vio-im__pill.is-active {
background: var(--wp--preset--color--vio-ink, #030303);
border-color: var(--wp--preset--color--vio-ink, #030303);
color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-image-interactive .vio-im__pill:focus-visible {
outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
outline-offset: 2px;
}
/* ── Two-column module ─────────────────────────────────────────────────────
True 50/50 split on desktop, vertical-center on the cross axis, 100px
gap between columns (no outer padding so each column's content can
stretch edge-to-edge of its half). Mirrors the Basic Callout 50/50
layout for visual consistency across the treatment page sections. */
.vio-image-interactive .vio-im__module {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: stretch;
}
@media (min-width: 720px) {
.vio-image-interactive .vio-im__module {
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
}
/* Center each column's content within its own 50% slot so the image
and the right-side text both visually anchor to the middle of their
half. The illus container is 1:1 and fills its column already; the
panel uses justify-content:center for vertical centering. */
.vio-image-interactive .vio-im__module > .vio-im__illus,
.vio-image-interactive .vio-im__module > .vio-im__panel {
min-width: 0;
width: 100%;
}
/* Horizontally center each column's content within its own 50% slot.
The illustration + text panel cap at a max-width that's meaningfully
smaller than the column so there's visible breathing room either
side — without that gap the centering technically happens but reads
as "pinned to the column's left edge" because the item is the same
width as its column. 500px on a 613px column yields ~55px on each
side, which is the visual centering the designer is asking for. */
@media (min-width: 720px) {
/* Illustration: anchor to the LEFT (outer) edge of its column so it
visually sits in the left third of the section, not pulled toward
the gap in the middle. */
.vio-image-interactive .vio-im__module > .vio-im__illus {
max-width: 500px;
margin-left: 0;
margin-right: auto;
justify-self: start;
}
/* Content panel: anchor to the RIGHT (outer) edge of its column so
it mirrors the illustration on the opposite side. */
.vio-image-interactive .vio-im__module > .vio-im__panel {
max-width: 500px;
margin-left: auto;
margin-right: 0;
justify-self: end;
}
}
/* ── View tabs (multi-view treatments) ───────────────────────────────────── */
/* Sits as an absolute overlay at the top-left of the illustration so it
doesn't disturb the 2-column module grid. Only emitted when the active
treatment has hotspots across 2+ views (face/body/skin/skin_deep). */
.vio-image-interactive .vio-im__view-tabs {
position: absolute;
top: 12px;
left: 12px;
z-index: 20;
display: flex;
gap: 6px;
flex-wrap: wrap;
pointer-events: auto;
}
.vio-image-interactive .vio-im__view-tab {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-family: var(--wp--preset--font-family--nunito-sans, sans-serif);
font-weight: 500;
padding: 7px 16px;
/* Inactive tabs: solid lotion (cream) fill so they're readable against
any illustration tone — face skin, body silhouette, dark backgrounds.
Soft shadow gives them lift above the illustration. */
background: var(--wp--preset--color--vio-lotion, #FEFFF9);
border: 1px solid var(--wp--preset--color--vio-ink, #030303);
border-radius: 20px;
color: var(--wp--preset--color--vio-ink, #030303);
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vio-image-interactive .vio-im__view-tab:hover {
background: var(--wp--preset--color--vio-ink, #030303);
color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-image-interactive .vio-im__view-tab.is-active {
background: var(--wp--preset--color--vio-ink, #030303);
border-color: var(--wp--preset--color--vio-ink, #030303);
color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-image-interactive .vio-im__view-tab:focus-visible {
outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
outline-offset: 2px;
}
/* ── Illustration container ──────────────────────────────────────────────── */
.vio-image-interactive .vio-im__illus {
position: relative;
background: var(--wp--preset--color--vio-alabaster, #F2F0E6);
border: 0.5px solid var(--wp--preset--color--vio-mtn-greige, #E9E3DC);
border-radius: 12px;
/* Square aspect. Storage is in 3:4 SVG-viewBox space; the 3:4 → 1:1
remap in render.php handles the translation so hotspots land at
their authored positions on the 1:1 visible canvas. If you change
this, also update $container_aspect_w/h in render.php AND the
matching aspect-ratio + storedToPicker/pickerToStored in
vio-smap-picker.js/.css. */
aspect-ratio: 1 / 1;
overflow: visible;
}
.vio-image-interactive .vio-im__svg,
.vio-image-interactive .vio-im__img {
width: 100%;
height: 100%;
display: none;
}
/* Uploaded photo fills the 1:1 illus container with `cover` so there's
never empty cream space on the front-end. Same fit as the picker.
The img is a single shared element (no data-base) — JS swaps its src
on pill click so siblings sharing a base can each have their own
per-treatment override (treatment_map_override_image). */
.vio-image-interactive .vio-im__img {
position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
}
/* Show the per-base SVG sketch matching the active service's base — but
only when the active service has no resolved image (override or
per-base global). The .has-image class flips visibility to the img. */
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="FACE"] .vio-im__svg[data-base="FACE"],
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="SKIN"] .vio-im__svg[data-base="SKIN"],
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="SKIN_DEEP"] .vio-im__svg[data-base="SKIN_DEEP"],
.vio-image-interactive .vio-im__illus:not(.has-image)[data-active-base="BODY"] .vio-im__svg[data-base="BODY"] {
display: block;
}
.vio-image-interactive .vio-im__illus.has-image .vio-im__img {
display: block;
}
/* ── Before / After slider ──────────────────────────────────────────────────
Per-treatment override: when the active service has both a before AND
an after image set in ACF, the slider sits on top of the SVG / base
photo (z-index: 5) but below the hotspots layer (z-index: 10) so
editors can still annotate zones over the comparison. */
.vio-image-interactive .vio-im__slider {
position: absolute;
inset: 0;
display: none;
overflow: hidden;
/* No border-radius — the parent .vio-im__illus already clips its
visible area. Inheriting a rounded corner here just nests another
curve inside the parent's, leaving a visible cream sliver in each
corner. Square edges + parent clip = clean. */
border-radius: 0;
z-index: 5;
/* Default split at 50%, updated by JS as the user drags the handle. */
--vio-bafter-pos: 50%;
user-select: none;
touch-action: pan-y;
}
.vio-image-interactive .vio-im__illus[data-active-service] .vio-im__slider[data-service] {
/* Hidden by default; the matching pair is shown by the rule below. */
}
/* Display swap: only the slider whose data-service matches the active
service shows. Generated for any slug the bundle includes — the
attribute selector handles arbitrary slugs without per-service rules. */
.vio-image-interactive .vio-im__illus .vio-im__slider[data-service] {
display: none;
}
.vio-image-interactive .vio-im__illus.has-active-slider .vio-im__slider[data-vio-im-active-slider] {
display: block;
}
.vio-image-interactive .vio-im__slider img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
user-select: none;
}
/* The "after" image shows only the portion to the RIGHT of the handle.
clip-path inset(top right bottom left) — we trim from the left by the
handle's current position. */
.vio-image-interactive .vio-im__slider-after {
clip-path: inset(0 0 0 var(--vio-bafter-pos));
}
/* Slider handle — visual language copied from the testimonials block's
.image-comparison__slider + __thumb so before/after looks consistent
across the site. Inactive: 2px white line + 30px transparent circle
with thin white ring + two inward triangles. Active (drag/hover):
line fades to transparent, circle shrinks slightly and fills with
semi-transparent dark (rgba(3,3,3,0.5)). */
.vio-image-interactive .vio-im__slider-handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--vio-bafter-pos);
width: 2px;
background: #FFFFFF;
transform: translateX(-50%);
cursor: ew-resize;
z-index: 2;
transition: background-color 0.3s ease;
}
/* The circular thumb. */
.vio-image-interactive .vio-im__slider-handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--wp--preset--color--vio-lotion, #FEFFF9);
transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Two inward-pointing triangles inside the circle — same SVG paths the
testimonials block uses (.image-comparison__thumb-icon). Drawn via
CSS mask so `background-color` controls fill; we keep them white
(lotion) in both states. */
.vio-image-interactive .vio-im__slider-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 10px;
background-color: var(--wp--preset--color--vio-lotion, #FEFFF9);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
pointer-events: none;
}
/* Hover affordance only — thumb scales up slightly. Matches the
testimonials' .image-comparison__range:hover~.__thumb behavior.
Doesn't touch the line or fill. */
.vio-image-interactive .vio-im__slider-handle:hover::before {
transform: translate(-50%, -50%) scale(1.2);
}
/* Active drag state — white line fades to transparent, thumb shrinks
and fills with semi-transparent dark. Matches testimonials'
`--active` rule. Triggered by .is-dragging (set by view.js while the
pointer is being moved) or keyboard focus. */
.vio-image-interactive .vio-im__slider.is-dragging .vio-im__slider-handle,
.vio-image-interactive .vio-im__slider-handle:focus-visible {
background-color: rgba(255, 255, 255, 0);
}
.vio-image-interactive .vio-im__slider.is-dragging .vio-im__slider-handle::before,
.vio-image-interactive .vio-im__slider-handle:focus-visible::before {
transform: translate(-50%, -50%) scale(0.8);
background-color: rgba(3, 3, 3, 0.5);
}
.vio-image-interactive .vio-im__slider-handle:focus-visible {
outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
outline-offset: 4px;
border-radius: 50%;
}
/* Before/After labels — match testimonials .image-comparison__caption-body:
bottom corners, very transparent warm-dark pill, lotion-colored text,
uppercase. Per-label opacity is computed in JS based on slider position
(via --vio-label-before-opacity / --vio-label-after-opacity custom
props) so each label fades smoothly as the handle crosses it, instead
of snapping at the extremes. */
.vio-image-interactive .vio-im__slider-label {
position: absolute;
bottom: 12px;
padding: 4px 8px;
background-color: rgba(58, 51, 26, 0.20);
color: var(--wp--preset--color--vio-lotion, #FEFFF9);
font-size: 12px;
letter-spacing: 0.6px;
text-transform: uppercase;
pointer-events: none;
z-index: 1;
transition: opacity 0.2s ease;
}
.vio-image-interactive .vio-im__slider-label--before {
left: 12px;
opacity: var(--vio-label-before-opacity, 1);
}
.vio-image-interactive .vio-im__slider-label--after {
right: 12px;
opacity: var(--vio-label-after-opacity, 1);
}
/* Legacy fallback: keep the old is-at-start / is-at-end snap rules so
any future code path that doesn't set the custom props still hides
labels at extremes. The JS-driven opacity overrides these at runtime. */
.vio-image-interactive .vio-im__slider.is-at-start .vio-im__slider-label--before,
.vio-image-interactive .vio-im__slider.is-at-end .vio-im__slider-label--after {
opacity: 0;
pointer-events: none;
}
/* When the slider takes over for a treatment, the per-base photo / SVG
underneath is irrelevant — hide it so the browser stops painting it
(and so the parent's rounded corners don't show its edge through).
The illus container's own border + cream background also get dropped
since the slider photos are the new visual surface. */
.vio-image-interactive .vio-im__illus.has-active-slider {
background: transparent;
border-color: transparent;
}
.vio-image-interactive .vio-im__illus.has-active-slider .vio-im__img,
.vio-image-interactive .vio-im__illus.has-active-slider .vio-im__svg {
display: none !important;
}
/* ── Hotspots ────────────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__hs-wrap {
position: absolute;
inset: 0;
pointer-events: none;
}
.vio-image-interactive .vio-im__hs {
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
/* Outline-only: transparent fill, white border. Filled-on-hover/active
for affordance so the user gets clear feedback when they engage with
a hotspot. Drop shadow stays so the ring reads against skin tones. */
background: transparent;
border: 1.5px solid #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
transition: all 0.18s ease;
z-index: 10;
box-shadow: 0 2px 8px rgba(3, 3, 3, 0.18);
pointer-events: auto;
padding: 0;
}
.vio-image-interactive .vio-im__hs:hover,
.vio-image-interactive .vio-im__hs.is-active {
/* Dot fades out when engaged — the region polygon underneath becomes
the visual focus instead. Other dots stay visible so users can
move to a different region. pointer-events stay so mouseleave can
fire and restore the dot when the user moves away. */
opacity: 0;
}
.vio-image-interactive .vio-im__hs.is-active {
/* Keep clickable while invisible — the dot is still the interaction
target; only its visual is hidden. */
background: transparent;
border-color: transparent;
box-shadow: none;
}
.vio-image-interactive .vio-im__hs:focus-visible {
outline: 2px solid var(--wp--preset--color--vio-ink, #030303);
outline-offset: 2px;
}
/* Numbers hidden by design — outline-only circles with no inner text.
Kept in the DOM for screen reader / aria-label content via the parent
button's accessible name. */
.vio-image-interactive .vio-im__hs-num {
display: none;
}
.vio-image-interactive .vio-im__hs-pulse {
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
/* White ring + soft drop shadow so it stays visible against any
photo (the previous taupe ring vanished against skin tones). */
border: 1px solid #FFFFFF;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: vio-im-pulse 2s ease-out infinite;
pointer-events: none;
}
.vio-image-interactive .vio-im__hs.is-active .vio-im__hs-pulse {
display: none;
}
@keyframes vio-im-pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.vio-image-interactive .vio-im__hs-pulse { animation: none; opacity: 0; }
}
/* ── Right panel ─────────────────────────────────────────────────────────── */
.vio-image-interactive .vio-im__panel {
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 720px) {
.vio-image-interactive .vio-im__panel {
min-height: 360px;
position: relative;
}
}
/* CTA state */
.vio-image-interactive .vio-im__cta-state {
transition: opacity 0.2s ease;
}
.vio-image-interactive .vio-im__cta-label {
color: var(--wp--preset--color--vio-mouse, #B29D92);
margin-bottom: 16px;
}
.vio-image-interactive .vio-im__cta-title {
margin: 0 0 16px;
}
.vio-image-interactive .vio-im__cta-sub {
/* No artificial max-width — content fills its 50% column so the right
side anchors edge-to-edge instead of clinging to the column's left. */
margin: 0 0 28px;
}
.vio-image-interactive .vio-im__cta-btn-wrap {
margin-top: 0;
}
/* Zone state */
.vio-image-interactive .vio-im__zone-state {
transition: opacity 0.2s ease;
}
.vio-image-interactive .vio-im__zone-label {
color: var(--wp--preset--color--vio-mouse, #B29D92);
margin-bottom: 14px;
}
.vio-image-interactive .vio-im__zone-title {
margin: 0 0 16px;
}
.vio-image-interactive .vio-im__zone-sell {
margin: 0 0 18px;
}
.vio-image-interactive .vio-im__zone-fact {
padding-left: 14px;
border-left: 2px solid var(--wp--preset--color--vio-mtn-greige, #E9E3DC);
margin: 0;
}
/* Desktop: stack states absolutely so the visible one keeps its slot.
Mobile: stack normally, CTA always visible at the bottom of the panel. */
@media (min-width: 720px) {
.vio-image-interactive .vio-im__cta-state,
.vio-image-interactive .vio-im__zone-state {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.vio-image-interactive .vio-im__cta-state[hidden],
.vio-image-interactive .vio-im__zone-state[hidden] {
display: none;
}
}
@media (max-width: 719px) {
/* Mobile uses the natural flow (no absolute positioning), so [hidden]
needs an explicit display:none to override the panel's flex layout. */
.vio-image-interactive .vio-im__cta-state[hidden],
.vio-image-interactive .vio-im__zone-state[hidden] {
display: none;
}
}
/* JSON data tag stays out of the layout. */
.vio-image-interactive script[data-vio-im-data] {
display: none;
}
/* =============================================================================
PHASE 1 — POLYGON ZONES (Treatment Map redesign)
When a hotspot has a `polygon` field with 3+ points, the renderer emits an
SVG in an overlay SVG above the illustration. CSS below styles
those polygons: subtle diagonal-stripe fill at rest (animated pulse so
users know they are interactive), solid translucent fill on hover/focus.
Numbered label sits at the polygon centroid.
============================================================================= */
.vio-im__illus { position: relative; }
.vio-im__zones-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none; /* clicks pass through transparent regions */
z-index: 2;
}
.vio-im__zones-svg .vio-im__zone-group {
pointer-events: auto; /* but ARE captured by polygon shapes themselves */
cursor: pointer;
outline: none;
}
/* Satellite polygons (hide_dot hotspots) — non-interactive on their own.
They light up only when their LINKED primary dot is hovered/clicked.
Without this, mousing over a satellite region directly would trigger
the linked-zone activation as if the user had hovered the primary dot. */
.vio-im__zones-svg .vio-im__zone-group--satellite {
pointer-events: none;
}
.vio-im__zones-svg .vio-im__zone {
/* Invisible at rest — zone only appears when its matching dot is
hovered (.is-hover) or activated (.is-active). Triggered by the
dot, not the polygon itself, so users discover regions through
the dots. */
fill: transparent;
stroke: transparent;
vector-effect: non-scaling-stroke;
transition: fill 0.18s ease, stroke 0.18s ease, opacity 0.18s ease;
opacity: 1;
}
.vio-im__zones-svg .vio-im__zone-group.is-hover .vio-im__zone,
.vio-im__zones-svg .vio-im__zone-group.is-active .vio-im__zone,
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone {
/* Solid translucent fill when the matching dot is engaged. */
fill: rgba(178, 157, 146, 0.45);
stroke: rgba(80, 60, 50, 0.7);
stroke-width: 0.18;
opacity: 1;
}
/* Interactivity cue — a subtle white "flash" sweeps through each zone
on a staggered timer (each zone delays by `--vio-im-zone-stagger`
seconds from the next), creating a gentle attention-getting ripple
across the map. Stops while the zone is hovered / active so the user
isn't distracted while reading the panel content. */
.vio-im__zones-svg .vio-im__zone-flash {
/* Disabled — zones are invisible at rest, so there's nothing to flash.
The element is kept in the DOM for backward compatibility with any
custom CSS extending this. */
display: none;
}
@keyframes vio-im-zone-flash {
/* Most of the cycle the flash is invisible; for ~12% of the cycle it
fades up to ~0.35 alpha and back down. With ~0.66s of "lit" time
per ~5.5s cycle the flash is plenty visible without being chatty. */
0%, 100% { opacity: 0; }
6% { opacity: 0.40; }
12% { opacity: 0; }
}
.vio-im__zones-svg .vio-im__zone-group:hover .vio-im__zone-flash,
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone-flash,
.vio-im__zones-svg .vio-im__zone-group.is-active .vio-im__zone-flash {
animation: none;
opacity: 0;
}
/* Respect reduced-motion preferences — no flashing for users with
prefers-reduced-motion. The stripe pattern stays visible so the zone
is still discoverable. */
@media (prefers-reduced-motion: reduce) {
.vio-im__zones-svg .vio-im__zone-flash { animation: none; }
}
.vio-im__zones-svg .vio-im__zone-num {
/* Hidden — numbers belong on the dot circles, not inside the polygon
zones. Matches the earlier removal of numbers from the dots themselves. */
display: none;
}
.vio-im__zones-svg .vio-im__zone-group:hover .vio-im__zone-num,
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone-num,
.vio-im__zones-svg .vio-im__zone-group.is-active .vio-im__zone-num {
fill: var(--wp--preset--color--vio-ink, #030303);
}
.vio-im__zones-svg .vio-im__zone-group:focus-visible {
/* SVG elements do not show a default focus ring; draw one ourselves
via an outline on the polygon for keyboard nav. */
}
.vio-im__zones-svg .vio-im__zone-group:focus-visible .vio-im__zone {
stroke-width: 0.4;
stroke: var(--wp--preset--color--vio-ink, #030303);
}