/* ========================================================================== SERVICES CAROUSEL - arrows below 1025px, rounded cards below 768px Scope is .services-slider throughout. The slide templates of this carousel share their element ids with copies that run in the projects carousel, so a rule written against those ids would reach two sections at once. The class sits on this widget alone. NOTHING IN HERE TOUCHES 1025px AND UP. The desktop arrows are placed by the custom css of the page (top:0, margin-top:-60px, 80px, anchored to the right end) and the four cards form one grid with shared one pixel dividers, which is what the sharp corners are for up there. ========================================================================== */ /* -------------------------------------------------------------------- WHAT WAS ALREADY THERE The buttons are not new. The arrows control of the carousel widget declares 'yes' as its default, so with no value of its own saved on the page the widget has always rendered with elementor-arrows-yes and with both buttons in the markup. They also already look the way the arrows of the other carousels look: cc-fx.php hands every .elementor-swiper-button the classes mmrb-glowcard ccx-glow-icon ccx-nospot mmrb-specbtn ccx-arrowbtn, and the custom css of the page puts the same two pictures on them that the tools carousel uses, at 80px with a round outline. So there is no button to build here, only a place to put it: up to 768px the page took them out with display:none, which is the width where one card fills the row and the arrows are the only way through the deck 769 to 1024 they were shown, but still standing on their desktop numbers, which lands the previous button on top of the last line of the section copy: that line ends at 487px on the English page while the button starts at 458px on an 800px wide screen Both are answered the same way below: anchored to the right edge of the deck, above it, on every width under 1025. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- THE MEASUREMENTS THE PLACEMENT IS BUILT ON --ccsvc-inset distance from the right edge of the WIDGET to the right edge of the pair. 20px, because that is where the deck ends: Elementor gives .elementor-main-swiper width:calc(100% - 40px) as soon as arrows are on and centres it, so the deck keeps exactly 20px on either side at every width. The arrows therefore line up with the right edge of the card underneath them and stay lined up when the screen changes. --ccsvc-btn edge length of the button. 80px keeps the desktop size where there is room for it, 48px on phones is the size the tools carousel uses down there and stays above the 44px a finger needs. --ccsvc-gap space between the two buttons, 12px, the same distance the tools carousel keeps between its pair. --ccsvc-lift distance from the bottom edge of the button up from the top edge of the deck. 20px reproduces what the desktop arrows do, so the gesture reads the same on every width. -------------------------------------------------------------------- */ .services-slider { --ccsvc-inset: 20px; --ccsvc-btn: 80px; --ccsvc-gap: 12px; --ccsvc-lift: 20px; } /* -------------------------------------------------------------------- THE PLACEMENT HOW IT IS ANCHORED The buttons are children of .elementor-main-swiper, and that box clips at its own edge (overflow:hidden). They escape the clip only because they are measured against .elementor-swiper one level up, which is the nearest positioned ancestor and does not clip. That is the whole reason an arrow can stand above the deck at all. .elementor-main-swiper MUST THEREFORE STAY UNPOSITIONED. Giving it a position of its own would make it the containing block of the buttons, and they would be cut off at the top edge of the deck. bottom: calc(100% + lift) bottom edge of the button lands 'lift' above the top edge of the deck right: inset right edge of the pair on the right edge of the deck transform: none the widget centres the buttons on the deck height with translateY(-50%); with the bottom edge doing the placement that shift has to go, or every button would ride half its own height too high The previous button is not given a second offset. It is shifted left by its own width plus the gap, so the pair keeps its spacing when the button size changes at 768px and no number has to be kept in step. WEIGHT The custom css of the page holds top, left, right and display for these buttons with !important on two classes. These rules carry !important as well and one class more, so they win on their own weight and do not depend on which file the browser reads last. -------------------------------------------------------------------- */ @media (max-width: 1024px) { .services-slider .elementor-swiper .elementor-swiper-button { display: flex !important; top: auto !important; bottom: calc(100% + var(--ccsvc-lift)) !important; left: auto !important; right: var(--ccsvc-inset) !important; width: var(--ccsvc-btn) !important; height: var(--ccsvc-btn) !important; /* Both margins go. The page hangs margin-top:-60px and * margin-right:161px on these buttons, and both were written for the * desktop corner, not for this one. */ margin: 0 !important; transform: none !important; } .services-slider .elementor-swiper .elementor-swiper-button-prev { transform: translateX(calc(-100% - var(--ccsvc-gap))) !important; } } /* -------------------------------------------------------------------- PHONES: THE ARROWS NEED A LINE OF THEIR OWN From 768px up the section heading block is left aligned and its copy is capped at 555px, which leaves the whole right hand end of that band empty - between 264px on the English page and 391px on the German one. The arrows stand in that empty end and nothing moves. Below 768px the same block is centred and its copy runs the full width of the screen. The last line of the German copy ends 24px short of the right edge at 375px and 17px short at 360px, so there is no empty end to stand in: an arrow placed there would sit on the words. The deck is therefore pushed down by one line and the arrows take the strip that opens up. 48px is added, which together with the 32px that already sit between the last line of copy and the deck gives 80px of room. The button is 48px and keeps 12px to the deck, so it starts 20px below the last line of copy. Why the margin sits on the widget and not on .elementor-swiper: the widget is a flex item of the section container, and flex items do not collapse their margins into anything. On .elementor-swiper the margin would collapse through the widget container and the result would depend on the surroundings. -------------------------------------------------------------------- */ @media (max-width: 767px) { .services-slider { --ccsvc-btn: 48px; --ccsvc-lift: 12px; margin-top: 48px; } } /* -------------------------------------------------------------------- ROUNDED CARDS WHERE ONE CARD FILLS THE ROW The card the visitor sees is the slide itself: it carries the one pixel border and the padding, it has no background of its own, and the rim glow is hung on it as well. A radius on the slide therefore rounds the border, and the glow ring follows on its own, because the ring inherits border-radius from the element it sits on. 16px is the radius the rest of the site uses on cards of this size. The slide keeps overflow:visible. That is not an oversight: the rim glow reaches past the edge of the card and would be cut off at the corner otherwise (cc-fx.css sets it for exactly that reason). Nothing inside the card reaches its edge either - the content stands 32px from the top, 36px from the left and 20px from the right - so there is nothing for a corner to clip. WHY THIS STOPS AT 768px AND DOES NOT RUN TO 1024px Below 768px one card fills the row and a sharp box reads as unfinished, which is what this fixes. From 768px to 1024px two cards stand side by side with no space between them, the way four of them stand on a desktop. Rounding those would put two curves against each other on the seam and pinch it. The cards stay square there for the same reason they stay square on the desktop: they are a grid, not single cards. -------------------------------------------------------------------- */ @media (max-width: 767px) { .services-slider .elementor-main-swiper .swiper-slide { border-radius: 16px; } }