/* Dual Carousel — Structural / Mechanical CSS ONLY ---------------------------------------------------- This file makes Swiper function correctly (flex layout, slide sizing, gap, overlay show/hide toggle, pagination dot positioning). It deliberately does NOT style any of the slide-content classes (.slide-*, .box-*, .testimonials-*, .tag-container, etc.) — those are fully left to your own child theme CSS, as requested. */ .nc-carousel { --nc-gap: 20px; --nc-slides-per-view: 3; --nc-start-offset: 0px; position: relative; width: 100%; } .nc-carousel__swiper { width: 100%; overflow: hidden; } /* Swiper requires the wrapper to be a flex/grid container and each slide to be a flex item it can transform via translate3d. We only set what Swiper needs to function — width/sizing of the slide itself is left to you (your .carousel-slide / .slide-content rules). IMPORTANT: the gap between slides is intentionally NOT a CSS margin here. Swiper calculates its total track width (and therefore how far it can drag before snapping back) using ONLY its own `spaceBetween` option — it has no awareness of a margin applied outside its control. A CSS margin-based gap makes the real track wider than what Swiper thinks it is, which is exactly why the last slide couldn't be reached and snapped back. The gap is applied via Swiper's `spaceBetween` config instead (see nc-dual-carousel.js), reading the same --nc-gap variable so the Slider control in the panel still works normally. */ .nc-carousel__wrapper { display: flex; padding-top: 60px; align-items: flex-start } .nc-carousel__wrapper > .swiper-slide { flex-shrink: 0; height: auto; } /* Grab-cursor feedback while dragging with a mouse. */ .nc-carousel__swiper.swiper-grabbing { cursor: grabbing; } /* --- Projects: popup overlay show/hide + fade mechanics --- The overlay is moved to a direct child of by JS (see nc-dual-carousel.js) so its `position: fixed` is always relative to the real viewport — nesting it inside the carousel would otherwise break "fixed" positioning, since Swiper applies a CSS transform to the slide track, and a transformed ancestor hijacks fixed positioning for anything inside it. Only the SHOW/HIDE + FADE mechanism lives here. Everything about how the popup actually looks (box layout, colors, sizing, backdrop) is left entirely to your own CSS for .slide-overlay-container, .overlay-content, .overlay-box, etc. */ .slide-overlay-container { position: fixed; inset: 0; z-index: 9999; display: none; opacity: 0; transition: opacity 0.35s ease; } /* Two-class system, both toggled by JS: - .nc-overlay-visible: takes the element out of `display: none` so it occupies the viewport and can start transitioning. Added right before fade-in starts, removed only after fade-out finishes. - .is-open: drives the actual opacity transition. Added one frame after .nc-overlay-visible (so the browser registers the starting opacity: 0 first), removed immediately on close to start the fade-out. */ .slide-overlay-container.nc-overlay-visible { display: flex; } .slide-overlay-container.nc-overlay-visible.is-open { opacity: 1; } /* Prevents the page from scrolling behind an open popup. Toggled by JS (see nc-dual-carousel.js) whenever any overlay — from either carousel instance — is open. */ body.nc-overlay-active { overflow: hidden; } /* Pagination dots container — positioning only, no color/shape styling. */ .nc-carousel__pagination { position: relative; display: flex; justify-content: center; margin-top: 34px; column-gap: 11px; } .nc-carousel__pagination .swiper-pagination-bullet { width: 12px; height: 12px; border-radius: 100%; background-color: rgba(255,255,255, 0.12); cursor: pointer; } .nc-carousel__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: linear-gradient(45deg, var(--blue), var(--cyan), var(--green), var(--orange) 90%); } .carousel-projects .slide-pic { display: flex; border-radius: 28px; overflow: hidden; box-shadow: 4px 4px 60px 0px rgba(255,255,255,0.08); } .carousel-projects .slide-pic img { width: 100%; height: 350px; object-fit: cover; transition: all 0.8s ease-in-out; } .carousel-projects .slide-title h3 { font-size: 20px; margin: 0; padding: 26px 24px 24px 24px; line-height: 30px; transition: all 0.18s linear; cursor: pointer; } .carousel-projects .slide-tags { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 24px; } .carousel-projects .slide-tags .tag-container { font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 22px; padding: 5px 16px; line-height: 22px; color: rgba(255, 255, 255, 0.7); } .slide-overlay-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 999999; } .slide-overlay-container .overlay-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .slide-overlay-container .overlay-content .overlay-box { position: relative; background-color: #fff; border-radius: 35px; padding-bottom: 24px; max-width: 560px; overflow: hidden; } .slide-overlay-container .overlay-content .overlay-box .box-close-icon { position: absolute; right: 16px; top: 16px; } .slide-overlay-container .overlay-content .overlay-box .box-close-icon button { border: none; background-color: rgba(0, 0, 0, .85); background-image: none; border-radius: 100%; width: 42px; height: 42px; padding: 6px; display: flex; justify-content: center; align-items: center; } .slide-overlay-container .overlay-content .overlay-box .box-close-icon button span { position: absolute; width: calc(100% - 16px); height: 2px; background-color: #fff; border-radius: 2px; transform: rotate(45deg); } .slide-overlay-container .overlay-content .overlay-box .box-close-icon button span:last-child { transform: rotate(-45deg); } .slide-overlay-container .overlay-content .box-pic { display: flex; } .slide-overlay-container .overlay-content .box-pic img { width: 100%; height: 300px; object-fit: cover; object-position: center center; } .slide-overlay-container .box-title h3 { color: #333; font-size: 20px; font-weight: 600; margin: 24px 0 10px 0; padding: 0 20px; line-height: 28px; } .slide-overlay-container .box-description p { color: #646776; padding: 0 20px; } .slide-overlay-container .box-btn-container { padding: 16px 20px 0 20px; } .slide-overlay-container .box-btn-container .box-btn { display: block; } .slide-overlay-container .box-btn-container .box-btn:hover { transform: scale(1.04); } .carousel-projects .slide-btn:hover .slide-title h3 { color: var(--blue); } .carousel-projects .slide-btn:hover .slide-pic img { transform: scale(1.5); } .nc-carousel__wrapper.carousel-testimonials { padding-top: 50px; } .carousel-testimonials .carousel-slide .slide-content { position: relative; padding: 26px; border-radius: 35px; min-height: 267px; } .carousel-testimonials .carousel-slide:nth-child(even) .slide-content { background-color: var(--bg-card); } .carousel-testimonials .carousel-slide:nth-child(odd) .slide-content { background-color: var(--bg-card2); } .carousel-testimonials .carousel-slide .slide-icon { display: flex; width: 34px; margin-bottom: 24px; } .carousel-testimonials .carousel-slide .testimonials-content { display: flex; flex-direction: column; justify-content: space-between; min-height: 179px; } .carousel-testimonials .carousel-slide .client-name p { margin: 8px 0 0 0; color: var(--blue); font-weight: 500; } .carousel-testimonials .carousel-slide .client-job p { margin-bottom: 0; color: rgba(255,255,255, 0.6); } @media only screen and (max-width: 1499px) { .carousel-projects .slide-title h3 { font-size: 19px; padding-top: 25px; } .slide-overlay-container .box-title h3 { font-size: 19px; } } @media only screen and (max-width: 1299px) { .carousel-projects .slide-tags, .carousel-projects .slide-title h3 { padding-left: 16px; padding-right: 16px; } .carousel-projects .slide-pic { border-radius: 24px; } } @media only screen and (max-width: 1199px) { .carousel-testimonials .carousel-slide .slide-content { padding: 22px; border-radius: 26px; } } @media only screen and (max-width: 991px) { .nc-carousel__wrapper { padding-top: 45px; } .nc-carousel__wrapper.carousel-testimonials { padding-top: 35px; } .carousel-projects .slide-pic { box-shadow: 4px 4px 40px 0px rgba(255, 255, 255, 0.08); } .carousel-projects .slide-pic img { height: 290px; } .carousel-projects .slide-title h3 { padding-top: 22px; padding-bottom: 22px; } } @media only screen and (max-width: 767px) { .nc-carousel__pagination { margin-top: 69px; } } @media only screen and (max-width: 575px) { .carousel-projects .slide-pic img { height: 270px; } .slide-overlay-container .overlay-content .overlay-box { min-width: 355px; max-width: 92%; width: 100%; } .slide-overlay-container .box-title h3 { font-size: 18px; line-height: 26px; } .slide-overlay-container .box-description p { font-size: 15px; } .slide-overlay-container .overlay-content .box-pic img { height: 230px; } .slide-overlay-container .box-btn-container, .slide-overlay-container .box-description p, .slide-overlay-container .box-title h3 { padding-left: 16px; padding-right: 16px; } } @media only screen and (max-width: 500px) { .nc-carousel__wrapper.carousel-testimonials { padding-top: 25px; } .nc-carousel__pagination { margin-top: 59px; } .carousel-projects .slide-tags, .carousel-projects .slide-title h3 { padding-left: 20px; padding-right: 20px; } }