/* ============================================================ DRUPAL WRAPPER STYLES These replace the prototype's demo-page styles (html, body, .stage). The .tt-* component block below is lifted verbatim. ============================================================ */ /* Full-width band the carousel sits in. The backdrop is applied per paragraph as an inline background-image from field_background_image. The background belongs HERE rather than on .tt-stage: cards are fixed width and the wheel spills past the 1410px stage box, so a boxed background would draw a visible rectangle edge behind the neighbours. overflow-x: clip contains that same spill so it never produces a horizontal scrollbar or scroll offset — which otherwise leaves the layout looking stale after a resize until reload. main.min.css already clips , but the prototype README asks for it on the wrapping container too. Vertical scrolling is unaffected. */ .tt-section { position: relative; width: 100%; padding: 0 0; background-color: #000; background-size: cover; background-position: center center; background-repeat: no-repeat; overflow-x: clip; } /* Mobile gets extra room under the wheel. The carousel's own height is written inline by the JS (width x HEIGHT_RATIO), so the space has to come from the band around it — padding on .tt-section, not margin on .tt-carousel, since .tt-stage is not a BFC and a bottom margin there would collapse straight out of the band. Breakpoint mirrors MOBILE_BREAKPOINT_PX (600) in turntable-carousel.js; .599.98 so the two agree at fractional widths. That check is on the CONTAINER width and this one is on the viewport, which match while .tt-section stays full-bleed. */ @media (max-width: 599.98px) { .tt-section { padding-bottom: 50px; } } /* The box the carousel measures itself against. Capped at 1410px; the carousel deliberately overflows it (neighbours swing past the edges). */ .tt-stage { width: 100%; max-width: 1410px; margin: 0 auto; } /* ============================================================ CAROUSEL COMPONENT STYLES (.tt-*) Self-contained. Safe to lift into a Drupal library as-is. The JS writes inline transform/opacity/filter/z-index per frame; everything else lives here. ============================================================ */ .tt-carousel { position: relative; width: 100%; max-width: 1410px; margin: 0 auto; /* height is set by JS from measured width + config; this is a first-paint fallback so layout doesn't jump before rAF runs */ height: 480px; /* overflow VISIBLE: cards are fixed-width and the wheel runs past the 1410px box, so neighbors are allowed to spill beyond the edges. */ overflow: visible; /* Contain the component's z-indexes. The JS writes a per-card z-index of up to 1000 (depth x 1000) and .tt-arrow sits at 9999; without a stacking context here those numbers compete in the ROOT context, where .header is only 999 (custom.css) and traps the mobile menu's own 9999 inside it. Result: the arrows always outranked the open menu, and the front card (exactly 1000) did too while the cards behind it did not — hence cards breaking through only some of the time as the wheel turned. isolate keeps every value above scoped to this element and leaves the carousel's own painting order alone. */ isolation: isolate; -webkit-user-select: none; user-select: none; touch-action: pan-y; /* vertical scrolls the page; horizontal is ours */ } /* Plane that holds the cards. Cards are absolutely positioned within it and moved by JS. */ .tt-track { position: absolute; inset: 0; } /* ---------------------------------------------------------------- SINGLE-IMAGE CARD MODEL Each .tt-item is one image. The JS sizes the item to a fixed pixel width (different for mobile vs desktop) and a fixed aspect ratio derived from the source images, then positions/scales it per frame around the turntable. The simply fills that fixed slot. ---------------------------------------------------------------- */ .tt-item { position: absolute; top: 0; left: 0; /* width/height set by JS from config (fixed px width × aspect). transform-origin centered so scale grows from the middle. */ transform-origin: center center; will-change: transform, opacity, filter; cursor: pointer; /* No CSS transition: motion is driven frame-by-frame in JS. transitions here would fight the rAF loop. */ } .tt-image { display: block; width: 100%; height: 100%; object-fit: contain; /* never stretch or clip the artwork */ /* drop-shadow (not box-shadow) so the shade follows the artwork's alpha edge rather than the object-fit: contain letterbox. Offset/blur/alpha are the three knobs — raise them together for a heavier lift. */ filter: drop-shadow(0 8px 18px rgba(0,0,0,0.30)); -webkit-user-drag: none; user-drag: none; pointer-events: none; /* taps/drags land on the .tt-item itself */ } /* Arrow controls */ .tt-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999; /* always above all cards */ width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(20,20,22,0.6); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; /* -webkit- prefix required for Safari / iOS Safari, where the arrows would otherwise lose their frosted-glass backing entirely. */ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s ease, border-color 0.15s ease; } .tt-arrow:hover { background: rgba(40,40,44,0.85); } .tt-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .tt-arrow.prev { left: 14px; } .tt-arrow.next { right: 14px; } .tt-item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 16px; }