/* ampeco/tw-gallery-slider — LAYOUT + carousel visuals only. Structure is Tailwind utilities (DS tokens) in render.php; the graduated coverflow sizing is per-frame JS in view.js. Here: the Swiper-scoped visuals ported 1:1 from careers.css `.card-carousel`, but with the LIVE DS tokens (short-form --c-* / --radius-* / --c-shadow-*) — the design's raw --color- and --color-bg- names don't exist on this site. Zero hex. */ .tw-gallery-slider { width: 100%; padding-bottom: var(--spacing-4xl, 32px); } /* The Swiper viewport pads its bottom so the scaled slides + arrows aren't clipped. overflow visible lets neighbour slides bleed past the rails. */ .tw-gallery-slider__viewport.swiper { width: 100%; position: relative; } /* Fixed 300×300 slide box at every breakpoint — the view.js geometry assumes a 300px slide + 12px gap (PITCH 312); do NOT make this responsive or the centre-distance scaling breaks. Initial scale/opacity = a graceful pre-JS / reduced-motion filmstrip; the rAF loop overrides these per frame once active. Two-class scope (.tw-gallery-slider .swiper-slide) so this beats the Swiper bundle CSS's single-class `.swiper-slide{width:100%}`, which view.js injects into AFTER this stylesheet — otherwise one slide fills the viewport. */ .tw-gallery-slider .swiper-slide { width: 300px; height: 300px; transform: scale(0.62); opacity: 0.5; will-change: transform, opacity; } .tw-gallery-slider .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-l, 16px); } /* Swiper's 3D shadow overlays off (slide effect, not coverflow-3d). */ .tw-gallery-slider .swiper-slide-shadow-left, .tw-gallery-slider .swiper-slide-shadow-right { background-image: none; } /* Pagination dots (optional) — line colour idle, brand active. */ .tw-gallery-slider .swiper-pagination-bullet { background: var(--c-line); opacity: 1; } .tw-gallery-slider .swiper-pagination-bullet-active { background: var(--c-brand); } /* Prev / next arrows — 52px white card circle, brand glyph, soft shadow + hairline; hover fills brand with inverse-ink glyph and lifts. Two-class scope so these beat the Swiper bundle CSS's single-class `.swiper-button-prev` (27×44px, #007aff, 8px radius) that view.js injects AFTER this stylesheet — same as the design's `.card-carousel .swiper-button-*`. */ .tw-gallery-slider .swiper-button-prev, .tw-gallery-slider .swiper-button-next { width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--c-surface-card); color: var(--c-brand); box-shadow: var(--c-shadow-2); border: 1px solid var(--c-line); padding: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .tw-gallery-slider .swiper-button-prev:hover, .tw-gallery-slider .swiper-button-next:hover { background: var(--c-brand); color: var(--c-ink-inv); transform: scale(1.06); box-shadow: var(--c-shadow-1, var(--c-shadow-2)); } .tw-gallery-slider .swiper-button-prev::after, .tw-gallery-slider .swiper-button-next::after { font-size: 18px; font-weight: 700; } .tw-gallery-slider .swiper-button-prev.swiper-button-disabled, .tw-gallery-slider .swiper-button-next.swiper-button-disabled { opacity: 0.45; } /* Pre-JS / no-Swiper-CSS fallback: a neat clipped flex filmstrip so the block never renders as a broken stack before the CDN bundle loads. */ .tw-gallery-slider__viewport:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 12px; overflow: hidden; } /* =========================================================================== is-style-thumbs — one large image over a navigating thumbnail strip. The ICNC26 ecosystem gallery. Values from Figma: main image 387 tall, thumbnails 209 tall, 16px gap, radius 12 throughout. Deliberately does NOT touch the coverflow rules above: that variant's slide box is pinned at 300x300 and its view.js derives every transform from hardcoded PITCH/HALF constants, so resizing it here would desync the maths. =========================================================================== */ .tw-gallery-slider--thumbs { padding-bottom: 0; } /* The coverflow variant centres itself in a 1152px rail; the thumbs variant fills whatever column it is dropped into (939 content column on ICNC26). */ .tw-gallery-slider--thumbs .tw-gallery-slider__inner { max-width: none; padding-inline: 0; } .tw-gallery-slider--thumbs .tw-gallery-slider__main { width: 100%; border-radius: 12px; overflow: hidden; background: var(--p-frost-500); /* the design's empty-slot fill */ } /* One slide at a time — override the shared 300x300 slide box. `opacity: 1` is REQUIRED: the coverflow base fades every slide to 0.5 and lets its rAF loop raise the centred one back up. That loop does not run for this variant, so without this the main image renders permanently washed out. */ .tw-gallery-slider--thumbs .swiper-slide { width: 100%; height: auto; opacity: 1; } .tw-gallery-slider--thumbs .tw-gallery-slider__main-slide { height: 387px; } /* Selector carries an element so it outranks the base `… .swiper-slide img` (0,2,1) radius — here the rounding belongs to the container, not the image. */ .tw-gallery-slider--thumbs .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* ---- thumbnail strip ---- */ .tw-gallery-slider--thumbs .tw-gallery-slider__thumbs { width: 100%; } .tw-gallery-slider--thumbs .tw-gallery-slider__thumb { height: 209px; border-radius: 12px; overflow: hidden; background: var(--p-frost-500); cursor: pointer; opacity: .55; transition: opacity .2s ease, box-shadow .2s ease; } .tw-gallery-slider--thumbs .swiper-slide.tw-gallery-slider__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .tw-gallery-slider--thumbs .tw-gallery-slider__thumb:hover, .tw-gallery-slider--thumbs .tw-gallery-slider__thumb:focus-visible { opacity: .85; } /* Swiper marks the thumb matching the visible slide. It is the only position indicator when dots are off, so it must be unmistakable. */ .tw-gallery-slider--thumbs .swiper-slide-thumb-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--c-line-brand); } .tw-gallery-slider--thumbs .tw-gallery-slider__thumb:focus-visible { outline: 2px solid var(--c-line-brand); outline-offset: 2px; } /* Arrows sit over the main image, not over the strip. */ .tw-gallery-slider--thumbs .tw-gallery-slider__nav { top: calc( 387px / 2 ); } @media (max-width: 768px) { .tw-gallery-slider--thumbs .tw-gallery-slider__main-slide { height: 220px; } .tw-gallery-slider--thumbs .tw-gallery-slider__thumb { height: 120px; } .tw-gallery-slider--thumbs .tw-gallery-slider__nav { top: calc( 220px / 2 ); } }