.hc-body .hc-block-tour {
--hc-tour-interval: 6000ms;
position: relative;
isolation: isolate;
display: grid;
gap: 16px;
margin: 28px 0;
overflow: hidden;
border-radius: 20px;
background: linear-gradient(160deg, var(--brand-navy), var(--brand-navy-raised));
box-shadow: 0 28px 56px -32px rgb(14 30 61 / 70%);
color: #e6eefc;
padding: 20px;
}
.hc-body .hc-block-tour::before {
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(55% 70% at 100% 0%, rgb(0 158 245 / 24%), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgb(80 227 194 / 12%), transparent 70%);
content: "";
pointer-events: none;
}
.hc-body .hc-block-tour :is(p, figure, ul, ol) {
margin: 0;
}
.hc-body .hc-block-tour > figure,
.hc-body .hc-tour-slide {
display: grid;
gap: 10px;
}
.hc-body .hc-block-tour img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: 0;
border-radius: 12px;
box-shadow: none;
}
.hc-body .hc-block-tour figcaption {
display: grid;
gap: 2px;
}
.hc-body :is(.hc-tour-label, .hc-tour-count) {
color: var(--brand-mint);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hc-body .hc-tour-title {
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.hc-body .hc-tour-sub {
color: #c6d4ea;
font-size: 15px;
line-height: 1.5;
}
.hc-body .hc-block-tour.is-ready {
padding: 22px 22px 14px;
}
.hc-tour-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px 28px;
}
.hc-tour-titles {
display: grid;
flex: 1 1 300px;
min-width: 0;
gap: 6px;
}
.hc-body .hc-tour-titles .hc-tour-title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.15;
text-wrap: balance;
}
.hc-body .hc-tour-titles .hc-tour-sub {
font-size: 16px;
}
.hc-tour-titles.is-turning > * {
animation: hc-tour-text 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hc-tour-titles.is-turning > :nth-child(2) {
animation-delay: 30ms;
}
.hc-tour-titles.is-turning > :nth-child(3) {
animation-delay: 60ms;
}
@keyframes hc-tour-text {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.hc-tour-picker {
position: relative;
flex: none;
width: min(240px, 100%);
}
.hc-tour-pick {
display: flex;
width: 100%;
min-height: 44px;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 0;
border-radius: 999px;
background: #7cc7f2;
box-shadow: 0 10px 24px -12px rgb(124 199 242 / 70%);
color: var(--brand-navy);
cursor: pointer;
padding: 0 14px 0 18px;
font: 700 13px/1 var(--hc-font);
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background-color 0.15s ease;
}
.hc-tour-pick:hover {
background: #96d3f5;
}
.hc-tour-pick svg {
width: 18px;
height: 18px;
flex: none;
transition: transform 0.26s ease;
}
.hc-tour-pick[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.hc-body .hc-tour-list {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: 0;
z-index: 5;
display: grid;
gap: 2px;
border-radius: 12px;
background: #fff;
box-shadow: 0 22px 44px -18px rgb(14 30 61 / 45%);
list-style: none;
padding: 6px;
}
.hc-body .hc-tour-list[hidden] {
display: none;
}
.hc-body .hc-tour-option {
margin: 0;
border-radius: 8px;
color: var(--ink-soft);
cursor: pointer;
padding: 10px 12px;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
.hc-body .hc-tour-option.is-active {
background: var(--surface-wash);
color: var(--brand-navy);
}
.hc-body .hc-tour-option[aria-selected="true"] {
background: var(--surface-selected);
color: var(--ink-selected);
font-weight: 700;
}
.hc-tour-stage {
position: relative;
overflow: hidden;
aspect-ratio: var(--hc-tour-ratio, 1280 / 694);
border-radius: 12px;
background: var(--brand-navy-raised);
box-shadow: 0 0 0 1px rgb(255 255 255 / 9%);
touch-action: pan-y;
}
.hc-body .hc-tour-stage .hc-tour-slide {
position: absolute;
inset: 0;
display: none;
opacity: 0;
transform: scale(1.015);
transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hc-body .hc-tour-stage .hc-tour-slide:is(.is-current, .is-staged, .is-leaving) {
display: block;
}
.hc-body .hc-tour-stage .hc-tour-slide.is-current {
z-index: 1;
opacity: 1;
transform: none;
}
.hc-body .hc-tour-stage img {
height: 100%;
border-radius: 0;
object-fit: cover;
object-position: top left;
}
.hc-body .hc-tour-stage figcaption {
display: none;
}
.hc-tour-foot {
display: flex;
align-items: center;
gap: 14px;
}
.hc-tour-play {
display: grid;
width: 36px;
height: 36px;
flex: none;
place-items: center;
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 10%);
color: #fff;
cursor: pointer;
padding: 0;
transition: background-color 0.15s ease;
}
.hc-tour-play:hover {
background: rgb(255 255 255 / 18%);
}
.hc-tour-play svg {
width: 14px;
height: 14px;
}
.hc-body .hc-tour-bar {
display: flex;
flex: 1;
gap: 8px;
list-style: none;
padding: 0;
}
.hc-body .hc-tour-bar li {
min-width: 0;
flex: 1;
margin: 0;
}
.hc-tour-bar button {
display: grid;
width: 100%;
height: 36px;
align-content: center;
border: 0;
border-radius: 6px;
background: none;
cursor: pointer;
padding: 0;
}
.hc-tour-bar i {
position: relative;
display: block;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgb(255 255 255 / 16%);
transition: background-color 0.15s ease, height 0.15s ease;
}
.hc-tour-bar button:hover i {
height: 6px;
background: rgb(255 255 255 / 28%);
}
.hc-tour-bar i::after {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--brand-mint);
content: "";
transform: scaleX(0);
transform-origin: left;
}
.hc-tour-bar .is-seen i::after {
opacity: 0.55;
transform: none;
}
.hc-tour-bar [aria-current="step"] i::after {
animation: hc-tour-fill var(--hc-tour-interval) linear forwards;
}
.hc-block-tour.is-paused .hc-tour-bar [aria-current="step"] i::after {
animation-play-state: paused;
}
.hc-block-tour.is-still .hc-tour-bar [aria-current="step"] i::after {
animation: none;
transform: none;
}
@keyframes hc-tour-fill {
from { transform: scaleX(0); }
to { transform: none; }
}
.hc-block-tour :is(.hc-tour-pick, .hc-tour-play, .hc-tour-bar button):focus-visible {
outline: 2px solid var(--brand-mint);
outline-offset: 2px;
}
@media (max-width: 768px) {
.hc-body .hc-block-tour,
.hc-body .hc-block-tour.is-ready {
gap: 12px;
border-radius: 18px;
padding: 16px 16px 10px;
}
.hc-tour-picker {
width: 100%;
}
.hc-tour-stage {
border-radius: 8px;
}
.hc-body .hc-tour-bar {
gap: 5px;
}
}
@media (prefers-reduced-motion: reduce) {
.hc-body .hc-tour-stage .hc-tour-slide,
.hc-tour-titles.is-turning > * {
transition: none;
animation: none;
}
}