/* cms-core/assets/css/cms-sliders.css * Structural styles and configurable theme design tokens. */ .cms-slider { position: relative; width: 100%; margin: 0 auto; /* Global Slider Token Defaults - Overridable by themes */ --slider-portfolio-media-bg: #1f2937; --slider-portfolio-text-color: #ffffff; --slider-portfolio-radius: 16px; /* rounds the background stage */ --slider-portfolio-center-radius: 10px; /* rounds the centered image */ --slider-testimonial-text: #4b5563; --slider-testimonial-brand: #ea7c1c; --slider-feature-bg: #111111; --slider-feature-max-height: 800px; --slider-star-filled: #f5a623; --slider-star-empty: #d1d5db; /* Animation Tokens */ --slider-zoom-scale: 1.04; /* Slightly subtler, cleaner modern transition scaling */ --slider-zoom-duration: 7000ms; /* Progress Indicator Tokens */ --slider-progress-bg: rgba(255, 255, 255, 0.2); --slider-progress-fill: #ea7c1c; --slider-progress-height: 4px; } /* Pre-init cloak. The .cms-slider-cloak class is put on by a synchronous inline script (cms_slider_enqueue_assets()) so it applies before the first paint, and is taken off again per-slider — via [data-cms-slider-ready] — once Swiper has laid that slider out. The track keeps its box; only its paint is suppressed. That way Swiper sizing the slides, centring the active one and injecting loop clones happens behind a transparent wrapper and none of it registers as layout shift. The opacity sits on .cms-slider (the wrapper) rather than .cms-slider__track: the track IS Swiper's .swiper-wrapper, and a `transition` shorthand there would replace swiper-bundle.css's `transition-property: transform` — Swiper sets only transition-DURATION inline, so the slides would stop animating. Nothing here fires without JavaScript: no script, no class, no cloak. */ .cms-slider-cloak .cms-slider:not([data-cms-slider-ready]) { /* visibility, not just opacity: Chromium's layout-shift tracker skips nodes whose computed visibility is not `visible`, so this is what actually keeps Swiper's init out of the CLS score. The box (and every slide's measurable width) survives, which Swiper needs to lay out. */ visibility: hidden; opacity: 0; } .cms-slider { /* visibility is listed alongside opacity so the pair stays correct in both directions. Per CSS Transitions, visibility interpolates discretely except that any progress past 0 counts as `visible` when either endpoint is visible — so the reveal is still instant, and a re-cloak (nothing does this today) would hold the element visible for the whole fade instead of snapping it away on frame one. */ transition: opacity .25s ease, visibility .25s ease; } /* Grab cursors for tactile feedback */ .cms-slider .swiper { cursor: grab; } .cms-slider .swiper:active { cursor: grabbing; } .cms-slider__viewport { position: relative; overflow: hidden; padding: 0 0 2.5rem; /* room for pagination dots */ } .cms-slider__track { display: flex; align-items: stretch; /* Forces all slides to share identical container heights */ } .cms-slider__slide { box-sizing: border-box; height: auto; /* Required for stretch behavior */ display: flex; flex-direction: column; justify-content: flex-start; } /* Base clipping container to restrict Ken Burns image scaling leak */ .cms-slider__media, .cms-slider__logo { overflow: hidden; position: relative; } .cms-slider__media img, .cms-slider__image { display: block; width: 100%; max-width: 100%; height: auto; /* Ken Burns setup. will-change is deliberately NOT set here: it would promote every image in every slide to its own compositor layer for the whole page lifetime (up to CMS_SLIDER_MAX_ACTIVE_SLIDES of them). Only the slide actually animating needs the hint. */ transform-origin: center center; transition: transform var(--slider-zoom-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Ken Burns Trigger Condition tied directly to Swiper Active State */ .swiper-slide-active .cms-slider__media img, .swiper-slide-active .cms-slider__image { transform: scale(var(--slider-zoom-scale)); } /* will-change is hinted on the neighbours as well as the active slide, not on the active slide alone: a hint that lands in the same frame as the transform it describes is too late to be worth anything — the layer gets allocated while the animation is already starting. Swiper marks the slides either side as -prev/-next before they rotate in, so the layer exists by the time the zoom begins, and stays for the 7s the transition runs. Three layers, not one per slide. */ .swiper-slide-active .cms-slider__media img, .swiper-slide-active .cms-slider__image, .swiper-slide-next .cms-slider__media img, .swiper-slide-next .cms-slider__image, .swiper-slide-prev .cms-slider__media img, .swiper-slide-prev .cms-slider__image { will-change: transform; } .cms-slider__link { display: flex; flex-direction: column; height: 100%; width: 100%; color: inherit; text-decoration: none; } /* Progress Timeline Navigation Bar styles */ .cms-slider__progress { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--slider-progress-height); background: var(--slider-progress-bg); z-index: 10; pointer-events: none; } .cms-slider__progress-bar { width: 100%; height: 100%; background: var(--slider-progress-fill); /* Driven by scaleX from the autoplayTimeLeft handler: a compositor-only property, so the countdown never triggers layout on the main thread. */ transform: scaleX(0); transform-origin: left center; will-change: transform; } .cms-slider__progress.is-paused .cms-slider__progress-bar { opacity: .45; } /* ── Portfolio ─────────────────────────────────────────────────────────── */ /* "Our Incredible Work" layout: a full-bleed background image, a centered device/screenshot image floated on top, and the title + subtitle overlaid at the bottom. The centered slide is emphasised; neighbours peek dimmed. */ .cms-slider--portfolio .cms-slider__slide { width: min(72%, var(--slider-portfolio-slide-max, 960px)); transition: opacity .4s ease, transform .4s ease; opacity: .55; } .cms-slider--portfolio .swiper-slide-active { opacity: 1; } /* The stage: aspect-locked box that clips the background image and hosts the center image + text overlay. */ .cms-slider--portfolio .cms-slider__media { position: relative; aspect-ratio: 16 / 9; background: var(--slider-portfolio-media-bg); overflow: hidden; border-radius: var(--slider-portfolio-radius, 0); } /* Background image layer (decorative) — fills the stage and takes the Ken Burns zoom on the active slide. */ .cms-slider--portfolio .cms-slider__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Dark scrim over the background so the centered image and text stay legible, heavier at the bottom where the title sits. */ .cms-slider--portfolio .cms-slider__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .30) 100% ); } /* Centered device / screenshot image, floated above the scrim. Padding leaves room for the title overlay along the bottom edge. */ .cms-slider--portfolio .cms-slider__center { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 6% 6% 22%; } .cms-slider--portfolio .cms-slider__center-img { display: block; width: auto; max-width: 82%; max-height: 100%; object-fit: contain; border-radius: var(--slider-portfolio-center-radius, 10px); filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45)); /* Exclude the center image from the background-only Ken Burns zoom. */ transform: none; transition: none; } .cms-slider--portfolio .swiper-slide-active .cms-slider__center-img { transform: none; } /* Title + subtitle overlay, anchored to the bottom of the stage. */ .cms-slider--portfolio .cms-slider__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-align: center; box-sizing: border-box; padding: 0 1.5rem 1.75rem; color: var(--slider-portfolio-text-color); } .cms-slider--portfolio .cms-slider__title { margin: 0 0 .35rem; font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); overflow-wrap: break-word; } .cms-slider--portfolio .cms-slider__subtitle { margin: 0; font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.4; opacity: .92; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); overflow-wrap: break-word; } @media (max-width: 767px) { .cms-slider--portfolio .cms-slider__slide { width: 100%; opacity: 1; } .cms-slider--portfolio .cms-slider__center { padding: 8% 8% 26%; } .cms-slider--portfolio .cms-slider__title { font-size: 1.4rem; } .cms-slider--portfolio .cms-slider__subtitle { font-size: .95rem; } } /* ── Testimonial ───────────────────────────────────────────────────────── */ .cms-slider--testimonial .cms-slider__slide { height: auto; } .cms-slider--testimonial .cms-slider__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; gap: .75rem; height: 100%; flex-grow: 1; } .cms-slider--testimonial .cms-slider__logo img { max-height: 64px; width: auto; object-fit: contain; } .cms-slider--testimonial .cms-slider__quote { margin: 0; font-style: normal; line-height: 1.5; color: var(--slider-testimonial-text); flex-grow: 1; /* Pushes author attributions evenly regardless of variable quote length */ } .cms-slider--testimonial .cms-slider__quote::before { content: "\201C"; margin-right: .15em; } .cms-slider--testimonial .cms-slider__quote::after { content: "\201D"; margin-left: .15em; } .cms-slider--testimonial .cms-slider__attribution { color: var(--slider-testimonial-brand); font-size: .9rem; } /* ── Feature (overlay, left-aligned copy) ─────────────────────────────── */ .cms-slider--feature .cms-slider__viewport { padding-bottom: 0; } .cms-slider--feature .cms-slider__media { position: relative; aspect-ratio: 21 / 9; /* Cap desktop hero height so ultra-wide viewports don't stretch the slide taller than the fold. Themes override via the token. The <=767px override drops to 4/3, which never reaches the cap, so no mobile-specific reset is needed. */ max-height: var(--slider-feature-max-height); background: var(--slider-feature-bg); } .cms-slider--feature .cms-slider__media img { width: 100%; height: 100%; object-fit: cover; } .cms-slider--feature .cms-slider__overlay { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; box-sizing: border-box; /* Anchor overlay text to the 1400px page center line on the left side */ padding-bottom: 3.5rem; padding-top: 4rem; padding-left: max(2rem, calc((100% - 1400px) / 2 + 2.5rem)); padding-right: 2rem; /* Full-width vertical gradient: dark at the bottom, fading to transparent at the top. Child copy is constrained to the left half separately so the gradient can span edge-to-edge without pulling the text with it. */ background: linear-gradient(to top, rgba(0, 0, 0, 0.90), rgba(0, 0, 0, 0.4) 70%, transparent 100%); } .cms-slider--feature .cms-slider__title, .cms-slider--feature .cms-slider__subtitle { max-width: 50%; } .cms-slider--feature .cms-slider__title { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 3vw, 3rem); font-weight: 700; line-height: 1.15; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); overflow-wrap: break-word; } .cms-slider--feature .cms-slider__subtitle { margin: 0 0 1.25rem; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); opacity: 0.95; overflow-wrap: break-word; } .cms-slider--feature .cms-slider__read-more { display: inline-block; background: #fff; color: #111; padding: 0.65rem 1.6rem; border-radius: 4px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform 0.2s ease, background-color 0.2s ease; } .cms-slider--feature .cms-slider__read-more:hover { transform: translateY(-2px); } @media (max-width: 1024px) { .cms-slider--feature .cms-slider__overlay { padding-left: 2rem; } .cms-slider--feature .cms-slider__title, .cms-slider--feature .cms-slider__subtitle { max-width: 67%; } } @media (max-width: 767px) { .cms-slider--feature .cms-slider__media { aspect-ratio: 4 / 3; } .cms-slider--feature .cms-slider__overlay { padding: 1.5rem 2rem 2.5rem; } .cms-slider--feature .cms-slider__title, .cms-slider--feature .cms-slider__subtitle { max-width: 100%; } .cms-slider--feature .cms-slider__title { font-size: 1.5rem; } .cms-slider--feature .cms-slider__subtitle { font-size: 0.95rem; } } /* ── Logos ─────────────────────────────────────────────────────────────── */ .cms-slider--logos .cms-slider__slide { align-items: center; justify-content: center; padding: 0 .5rem; /* Logos have no aspect-ratio box, so the row would collapse to zero height and then jump to 64px as each image decodes. Reserve it up front. */ min-height: 64px; } .cms-slider--logos .cms-slider__image { max-height: 64px; width: auto; margin: 0 auto; filter: grayscale(100%); opacity: .8; transition: filter .2s ease, opacity .2s ease; } .cms-slider--logos .cms-slider__image:hover { filter: grayscale(0); opacity: 1; } /* ── Star rating ───────────────────────────────────────────────────────── */ .cms-slider__rating { display: inline-flex; gap: 2px; color: var(--slider-star-empty); font-size: 1rem; line-height: 1; } .cms-slider__star.is-filled { color: var(--slider-star-filled); } /* ── Featured Posts (automated overlay) ────────────────────────────────── */ .cms-slider--featured_posts .cms-slider__viewport { padding-bottom: 0; } .cms-slider--featured_posts .cms-slider__media { position: relative; aspect-ratio: 21 / 9; background: var(--slider-feature-bg); } .cms-slider--featured_posts .cms-slider__media img { width: 100%; height: 100%; object-fit: cover; } .cms-slider--featured_posts .cms-slider__overlay { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; box-sizing: border-box; /* Modern Layout Engine: Locks the overlay typography to the 1400px page center line */ padding-bottom: 3.5rem; padding-top: 4rem; padding-left: max(2rem, calc((100% - 1400px) / 2 + 2.5rem)); padding-right: max(2rem, calc((100% - 1400px) / 2 + 2.5rem)); /* Smoother color falloff for rich background readability */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%); } .cms-slider--featured_posts .cms-slider__title { margin: 0 0 1rem; font-size: clamp(2rem, 3.5vw, 3.5rem); /* Fluent typographic scaling */ font-weight: 700; line-height: 1.15; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); max-width: 850px; /* Limits headline line width for modern, easy reading */ overflow-wrap: break-word; } .cms-slider--featured_posts .cms-slider__read-more { display: inline-block; background: #fff; color: #111; padding: 0.65rem 1.6rem; border-radius: 4px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform 0.2s ease, background-color 0.2s ease; } .cms-slider--featured_posts .cms-slider__read-more:hover { transform: translateY(-2px); } @media (max-width: 1024px) { .cms-slider--featured_posts .cms-slider__overlay { padding-left: 2rem; padding-right: 2rem; } } @media (max-width: 767px) { .cms-slider--featured_posts .cms-slider__media { aspect-ratio: 4 / 3; } .cms-slider--featured_posts .cms-slider__overlay { padding: 1.5rem 2rem 2.5rem; } .cms-slider--featured_posts .cms-slider__title { font-size: 1.65rem; } } /* ── Nav buttons ───────────────────────────────────────────────────────── */ .cms-slider__nav-prev, .cms-slider__nav-next { background: transparent; border: 0; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; } .cms-slider__nav-prev:active, .cms-slider__nav-next:active { transform: scale(0.92); } /* ── Pagination dots ──────────────────────────────────── */ @media (max-width: 599px) { .cms-slider__pagination .swiper-pagination-bullet { width: 6px; height: 6px; } } /* ── Keyboard focus ────────────────────────────────────────────────────── */ /* Swiper ships no focus styling of its own, and the nav buttons sit on top of photography where the browser default ring is easy to lose. */ .cms-slider__nav-prev:focus-visible, .cms-slider__nav-next:focus-visible, .cms-slider__link:focus-visible, .cms-slider .swiper-pagination-bullet:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .55); border-radius: 4px; } /* ── Reduced motion ────────────────────────────────────────────────────── */ /* Autoplay is switched off in cms-sliders.js for the same query; this covers the purely decorative CSS motion (Ken Burns zoom, hover lifts, fades). */ @media (prefers-reduced-motion: reduce) { .cms-slider__media img, .cms-slider__image, .swiper-slide-active .cms-slider__media img, .swiper-slide-active .cms-slider__image, .swiper-slide-next .cms-slider__media img, .swiper-slide-next .cms-slider__image, .swiper-slide-prev .cms-slider__media img, .swiper-slide-prev .cms-slider__image { transform: none; transition: none; will-change: auto; } .cms-slider, .cms-slider--portfolio .cms-slider__slide, .cms-slider--feature .cms-slider__read-more, .cms-slider--featured_posts .cms-slider__read-more, .cms-slider--logos .cms-slider__image { transition: none; } .cms-slider--feature .cms-slider__read-more:hover, .cms-slider--featured_posts .cms-slider__read-more:hover { transform: none; } }