/*
Radial Hero Carousel — component stylesheet.
Depends on inline styles/transforms the companion JS sets on each element
every frame (position, scale, rotation), so this file only owns the parts
that don't change: box shape, crossfade transitions, and the few things
that differ by breakpoint (label size, mobile anchor position).
Customize via the CSS custom properties on :root (or scope them to a
wrapper if a page has more than one instance). Everything else here is
structural and should rarely need editing.
*/
:root {
--rhc-slide-height: 300px; /* rendered height of one carousel card at scale 1 */
--rhc-slide-radius: 1rem; /* card corner rounding */
--rhc-slide-border: 1px solid rgba(255, 255, 255, 0.12);
--rhc-slide-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.55);
--rhc-label-color: #F8F5EF;
--rhc-label-bg-from: rgba(10, 12, 13, 0.92);
--rhc-label-bg-to: rgba(10, 12, 13, 0);
--rhc-label-font-size: 13px;
--rhc-label-font-size-tablet: 17px; /* 768–1023px */
--rhc-label-font-size-mobile: 20px; /* <768px; unused while the wheel is hidden on mobile, kept for custom layouts */
--rhc-progress-color: #FD6801; /* mobile timer line; set to the site's accent */
}
/* Background crossfade slideshow behind the hero content.
IMPORTANT: this must stay JS-driven (an .is-active class toggled by
script), not CSS @keyframes. The whole point is that the background
image change is synced to whichever carousel card is currently
"active," and that active card is a runtime computation (continuous
rotation angle vs. viewport state), not a fixed timer a CSS animation
could mirror. Two independently-timed animations WILL drift apart
within a few cycles even if you compute the interval to match. */
.rhc-bg-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.08);
transition: opacity 1.2s ease, transform 7s ease-out;
}
.rhc-bg-slide.is-active {
opacity: 1;
transform: scale(1.14);
}
@media (prefers-reduced-motion: reduce) {
.rhc-bg-slide { transition: none !important; transform: none !important; opacity: 0; }
.rhc-bg-slide.is-active { opacity: 1; }
}
/* The wheel's positioning anchor. It has zero size — it's just a point
the JS treats as (0,0) when it places each card with cos/sin math.
pointer-events:none here, re-enabled per-card below, so the empty space
around cards inside this box never blocks clicks to whatever's under it. */
#radial-carousel {
pointer-events: none;
}
/* Swipe support. The hero itself should be touch-action: pan-y (page still
scrolls vertically on mobile, where a horizontal swipe changes slide). On
tablet/desktop the swipe is VERTICAL, so the cards and the optional
swipe-zone overlay must not let the browser scroll the page. */
.rhc-hero { touch-action: pan-y; }
@media (max-width: 767px) { .rhc-swipe-zone { display: none; } }
@media (min-width: 768px) {
.rhc-slide, .rhc-swipe-zone { touch-action: none; user-select: none; }
.rhc-swipe-zone { cursor: grab; }
.rhc-swipe-zone:active { cursor: grabbing; }
}
.rhc-slide {
position: absolute;
top: 0;
left: 0;
height: var(--rhc-slide-height);
aspect-ratio: 16 / 9;
border-radius: var(--rhc-slide-radius);
overflow: hidden;
display: block;
pointer-events: auto;
border: var(--rhc-slide-border);
box-shadow: var(--rhc-slide-shadow);
/* transform is set every frame by the JS (translate3d position +
translate(-50%,-50%) recenter + scale + rotate) — don't fight it
with a CSS transition on transform, it'll lag behind the rAF loop. */
}
.rhc-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rhc-slide-label {
position: absolute;
inset: auto 0 0 0;
padding: .85rem 1rem;
font-size: var(--rhc-label-font-size);
letter-spacing: .01em;
color: var(--rhc-label-color);
background: linear-gradient(to top, var(--rhc-label-bg-from), var(--rhc-label-bg-to));
}
@media (min-width: 768px) and (max-width: 1023px) {
.rhc-slide-label { font-size: var(--rhc-label-font-size-tablet); }
}
@media (max-width: 767px) {
.rhc-slide-label { font-size: var(--rhc-label-font-size-mobile); padding: 1rem 1.1rem; }
}
/* Mobile: the wheel is hidden; slides change by swipe / timer instead. */
@media (max-width: 767px) {
#radial-carousel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#radial-carousel { display: none; }
}
/* Mobile timer line: grows left to right over the slide dwell time (the JS
sets animation-duration from mobileStepMs and adds .is-running). Offset the
wrapper below any fixed header so it isn't hidden behind it (see
embed-snippet.html). Hidden at tablet/desktop. */
.rhc-progress {
position: absolute;
inset: 0 0 auto 0;
height: 2px;
z-index: 20;
pointer-events: none;
}
@media (min-width: 768px) { .rhc-progress { display: none; } }
.rhc-progress-bar {
height: 100%;
width: 100%;
background: var(--rhc-progress-color);
transform: scaleX(0);
transform-origin: left center;
}
.rhc-progress-bar.is-running { animation: rhc-progress linear forwards; }
@keyframes rhc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Hero text column: cap its width so the wheel (shifted to clear it on
desktop/tablet — see the JS's computeShiftX) never has to fight the
copy for space. Apply this to whatever wraps your /
/CTAs.
Adjust the percentage to match how wide your carousel cards render. */
.rhc-hero-text {
max-width: 42rem; /* mobile default; unconstrained is fine too */
}
@media (min-width: 768px) {
.rhc-hero-text.rhc-hero-text-clamped { max-width: 46%; }
}
/* Entrance animation replayed on the hero headline/subtext every time the
active card changes. Swap this keyframe for whatever entrance effect
your site already uses — the JS only needs a class it can remove and
re-add (see "replaySmokeIn" in the JS) to replay it; it doesn't care
what the animation actually does. */
.rhc-copy-in {
opacity: 0;
animation: rhc-copy-in 1.4s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes rhc-copy-in {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.rhc-copy-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}