/* ==================================================================== * THE HOME PAGE ON NARROW WINDOWS * assets/ccx-mobhome.css, belongs to inc/ccx-mobhome.php * * Nine corrections, all of them below 1025px, all of them measured on the * published page before and after. Every block below says what was * measured, what it should be and where the number comes from. Nothing * here reaches the desktop: the outermost query is the gate. * * Both language versions carry the same element ids, so every rule names * the two page classes. The php file writes them through ccfx_home_sel(), * this file writes them out, because a stylesheet cannot call php. * * ORDER OF THE BLOCKS * 1 the page no longer reaches past the right edge * 2 the services headline steps down on a tablet * 3 the certificate tile stops growing on a tablet * 4 the reference slider uses the full row * 5 one place for the arrows of all four carousels * 6 a reference block has one left edge * 7 the charity banner keeps the gutter of its neighbours * 8 the air between two sections never falls below the step * 9 small change of the tool name row on the narrowest phones * ==================================================================== */ /* -------------------------------------------------------------------- * 1 THE PAGE NO LONGER REACHES PAST THE RIGHT EDGE * * Measured on the published page: at 768, 834 and 1024 pixels the * document was three pixels wider than the window, on both languages. * The three pixels are old and were carried as a known leftover. * * The cause, found by walking every box that reaches past the right edge * up its ancestors and clipping it at each one that cuts: it is the rim * of the four blog cards. The rim of .mmrb-glowcard is a span that sits * --gc-pad outside the card on every side so the conic mask has room for * the outer glow, and the blog cards carry 20px of it. From 768px up the * blog grid is a single column, so a card is the width of the window * minus the 16px gutter on each side, and 20px of rim on the right lands * 4px past the window. Rounded, three pixels of scroll. * * 14px instead of 20. The ring itself does not move: it is drawn by the * ::before of the rim, which sits --gc-pad back inside again, so it stays * exactly on the card edge whatever the padding is. Only the box that * carries the mask gets smaller, and 14px still clears the widest of the * four box shadows that paint the glow, whose blur is 15px and whose * visible part ends well before that. The arithmetic holds at every * width, not only at the three measured ones: a card is always the window * minus 32, so the rim ends at window minus 18. * * Why not overflow-x:clip on the page root, which is the usual answer on * this site: a clip would hide the next real overflow as well, and this * one took an hour to find. The cause is removed instead of covered. * -------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-8073 .elementor-loop-container .mmrb-glowcard, .elementor-22000 .elementor-loop-container .mmrb-glowcard { --gc-pad: 14px; } } /* -------------------------------------------------------------------- * 2 THE SERVICES HEADLINE STEPS DOWN ON A TABLET * * "Our Services" was set to 140px on the desktop and to 40px on a phone, * and nothing in between. Elementor hands an unset tablet value straight * down from the desktop, so between 768 and 1024 pixels two words stood * 140px tall and took 314 pixels of height, which is a third of a tablet * screen before the first sentence of the section. * * 40px is not invented here, it is the value this page already uses in * the same band for the two other headlines of that size: "Trust Our * Results, Not Just Our Words" and "Experienced, Diverse, and Driven" * both drop from 140 to 40 at 1024 because someone set their tablet * value. This one only ever missed it. * * The line height follows: 132px was 0.94 of the old size, the same * factor on 40px would put the two lines on top of each other, so 44px, * which is what the other two carry. * * The size Elementor writes per page stands on four class names * (.elementor-8073 .elementor-element.elementor-element-66cb8fd8 * .elementor-heading-title), so the rule below repeats the widget class * once more and wins on weight rather than on file order. * -------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-8073 .elementor-element.elementor-element-66cb8fd8.elementor-element-66cb8fd8 .elementor-heading-title, .elementor-22000 .elementor-element.elementor-element-66cb8fd8.elementor-element-66cb8fd8 .elementor-heading-title { font-size: 40px; line-height: 44px; } } /* -------------------------------------------------------------------- * 3 THE CERTIFICATE TILE STOPS GROWING ON A TABLET * * The tile holds one picture, and there are two of them: a wide one for * the desktop and an upright one for narrow windows, 1600 by 2000 pixels, * which inc/ccx-vidswap.php swaps in up to 1024px. The upright picture * had no width of its own and filled the block, so it grew with the * window instead of with its content: * * 375px window tile 339 x 424 five logos, comfortable * 768px window tile 724 x 905 a screen and a half for five logos * 1024px window tile 980 x 1225 more than a whole screen * 1440px window tile 680 x 547 the wide picture, the intended size * * A cap of 460px puts the tile at 460 x 575 on a tablet, which is within * thirty pixels of the height the same tile has on a desktop. Below * roughly 490px of window the tile is narrower than the cap anyway, so a * phone is untouched and keeps the 339 x 424 it has today. * * The cap sits on the widget, not on the picture: the video layer that * ccx-vidswap lays over the picture takes its size from the same box, so * both shrink together and the lights stay on the logos. * * The widget already carries max-width:100% from the stylesheet Elementor * writes per page, and that one names three classes * (.elementor-8073 .elementor-element.elementor-element-6263cfba). The * rule below repeats the widget class once more, so it wins on weight and * not on the order the files happen to be read in. * -------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-8073 .elementor-element.elementor-element-6263cfba.elementor-element-6263cfba, .elementor-22000 .elementor-element.elementor-element-6263cfba.elementor-element-6263cfba { max-width: 460px; margin-left: auto; margin-right: auto; } } /* -------------------------------------------------------------------- * 4 THE REFERENCE SLIDER USES THE FULL ROW * * Elementor keeps 20px free on each side of a carousel deck when the * arrows are on, through .elementor-arrows-yes .elementor-main-swiper * {width: calc(100% - 40px)}. On this page the arrows of all four * carousels stand ABOVE the deck, not beside it, so those forty pixels * hold nothing. * * The project sliders had that reserve taken off their phone layout in an * earlier round (.custom-slider in assets/ccx-tilt.css, up to 767px). The * reference slider of "Trust Our Results" was never included, so its card * was 303px wide in a 343px row on a phone, and 696 in 736 on a tablet: * the only card of the page that did not stand on the same line as the * headline above it. The project sliders kept the reserve on a tablet for * the same reason. * * Both get the full row here, up to 1024px. Swiper measures the slide * width from this box when it starts, and this stylesheet is in the head * long before that; on a resize it measures again anyway. * * The margin has to go with the width. Elementor writes the reserve twice, * once as the width and once as margin-right on the same box, and a box * with width:100% and a right margin is wider than its parent. * -------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-8073 .trust-slider .elementor-main-swiper, .elementor-8073 .custom-slider .elementor-main-swiper, .elementor-22000 .trust-slider .elementor-main-swiper, .elementor-22000 .custom-slider .elementor-main-swiper { width: 100% !important; margin-right: 0 !important; } } /* -------------------------------------------------------------------- * 5 ONE PLACE FOR THE ARROWS OF ALL FOUR CAROUSELS * * The page runs four carousels below 1025px and, measured at 375 and 768 * pixels, they put their arrows in two different corners: * * services upper right of the deck set in round eleven * client quotes upper right of the deck set in round ten * references upper LEFT never touched * projects x2 upper LEFT never touched * * The two that were rebuilt were both moved to the right, so the right is * the newer decision and the one this block follows. It also empties the * band the left arrows created: at 768px a hundred pixels of nothing * stood between the section copy and the first card, with two buttons * floating in it. * * HOW THE PLACEMENT WORKS, because it is not obvious * The buttons are children of .elementor-main-swiper, which clips at its * own edge. They escape that clip only because they are measured against * .elementor-swiper one level up, which is positioned and does not clip. * .elementor-main-swiper must therefore stay unpositioned: give it a * position and it becomes the containing block, and the buttons are cut * off at the top edge of the deck. * * bottom: calc(100% + lift) the lower edge of the button lands * 'lift' above the upper edge of the deck * right: 0 the pair ends on the right edge of the * deck, which after block 4 is the right * edge of the row * transform: none the page centres these buttons on the * deck with a shift of its own, and with * the lower edge doing the placement that * shift has to go * * The previous button is not given a second offset. It moves left by its * own width plus the gap, so the pair keeps its spacing when the button * grows from 44 to 80 pixels at 768 and no number has to be kept in step. * * The two numbers are read off the services carousel, which is the one * that was placed deliberately: twelve pixels of air over the deck on a * phone, twenty on a tablet, twelve between the two buttons at both * sizes. The projects carousel had its two buttons touching at 768px, * with no gap at all. * * WEIGHT * The page writes top, left, right, margin and a transform for these * buttons with !important on two class names, so these rules carry * !important as well and one class more. * -------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-8073 .trust-slider, .elementor-8073 .custom-slider, .elementor-22000 .trust-slider, .elementor-22000 .custom-slider { --ccmh-lift: 20px; --ccmh-gap: 12px; } .elementor-8073 .trust-slider .elementor-swiper .elementor-swiper-button, .elementor-8073 .custom-slider .elementor-swiper .elementor-swiper-button, .elementor-22000 .trust-slider .elementor-swiper .elementor-swiper-button, .elementor-22000 .custom-slider .elementor-swiper .elementor-swiper-button { top: auto !important; bottom: calc(100% + var(--ccmh-lift)) !important; left: auto !important; right: 0 !important; margin: 0 !important; transform: none !important; } .elementor-8073 .trust-slider .elementor-swiper .elementor-swiper-button-prev, .elementor-8073 .custom-slider .elementor-swiper .elementor-swiper-button-prev, .elementor-22000 .trust-slider .elementor-swiper .elementor-swiper-button-prev, .elementor-22000 .custom-slider .elementor-swiper .elementor-swiper-button-prev { transform: translateX(calc(-100% - var(--ccmh-gap))) !important; } } @media (max-width: 767px) { .elementor-8073 .trust-slider, .elementor-8073 .custom-slider, .elementor-22000 .trust-slider, .elementor-22000 .custom-slider { --ccmh-lift: 12px; } } /* -------------------------------------------------------------------- * 6 A REFERENCE BLOCK HAS ONE LEFT EDGE * * On a phone the six reference blocks read with three different edges and * two different alignments at once. Measured at 375px inside one block, * whose content column runs from 28 to 347: * * logo, badge 28 left aligned * headline 39.5 CENTRED, 296 wide * paragraph 43.5 CENTRED, 288 wide * bullet tiles 28 left aligned * button 28 left aligned, full width * * From 768px up the same block is left aligned throughout, and so is * every other card of the page on a phone. The centring is a leftover on * two widgets, and it cannot be carried through: the bullet rows and the * button are full width rows and have no centre to move to. * * So the two text widgets give up their percentage width and their * centre, and the block reads down one edge like the tablet does. * -------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-8073 .ccref-content > .elementor-widget-heading, .elementor-22000 .ccref-content > .elementor-widget-heading { --container-widget-width: 100%; width: 100%; max-width: 100%; } .elementor-8073 .ccref-content > .elementor-widget-heading .elementor-heading-title, .elementor-22000 .ccref-content > .elementor-widget-heading .elementor-heading-title { text-align: left; } } /* -------------------------------------------------------------------- * 7 THE CHARITY BANNER KEEPS THE GUTTER OF ITS NEIGHBOURS * * The banner is a card with rounded corners. On a phone it sits in the * 16px gutter every other section of the page keeps. From 768px up that * gutter was dropped and the card ran into both window edges, so its * corners were cut off by the edge of the screen while the sections above * and below it kept their gutter. * * On a desktop the same full width reads as a deliberate wide band, and * it is left alone there. Between 768 and 1024 the page is still a narrow * layout in every other respect, so the banner follows the phone. * -------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-8073 > .elementor-element.elementor-element-97f1c8b1.elementor-element-97f1c8b1, .elementor-22000 > .elementor-element.elementor-element-97f1c8b1.elementor-element-97f1c8b1 { padding-left: 16px; padding-right: 16px; } } /* -------------------------------------------------------------------- * 8 THE AIR BETWEEN TWO SECTIONS NEVER FALLS BELOW THE STEP * * Measured as the distance from the last thing one section paints to the * first thing the next one paints, in the order a narrow window shows * them. The desktop keeps 110 to 328 pixels between sections, around 180 * as a rule. A phone keeps 22 to 150, a tablet 0 to 249. * * Three boundaries fell out of that rhythm: * * certificates -> quotes 375px: 22 (rest of the page 39 to 150) * references -> projects 375px: 36 * references -> projects 768px: 0 two sections touching * * The numbers below lift exactly those three to the step their neighbours * keep, and nothing else is touched. * * A COLUMN OF FLEX ITEMS ADDS MARGINS, IT DOES NOT COLLAPSE THEM. The * section order below 1025px is made with flex (assets/ccx-mobilorder.css), * so a margin here is added to whatever the section above already carries * at its lower edge. Both neighbours were checked: the certificate section * and the reference slider both end with a margin of zero, so the values * below are the whole change. Anyone adding a margin to those two sections * has to measure this again. * -------------------------------------------------------------------- */ @media (max-width: 767px) { /* quotes, after the team and certificates section */ .elementor-8073 > .elementor-element.elementor-element-164f1cdc.elementor-element-164f1cdc, .elementor-22000 > .elementor-element.elementor-element-164f1cdc.elementor-element-164f1cdc { margin-top: 42px; } /* projects, after the reference slider. The section already carries * 40px here, so this is the sum, not an addition. */ .elementor-8073 > .elementor-element.elementor-element-32128717.elementor-element-32128717, .elementor-22000 > .elementor-element.elementor-element-32128717.elementor-element-32128717 { margin-top: 68px; } } @media (min-width: 768px) and (max-width: 1024px) { .elementor-8073 > .elementor-element.elementor-element-32128717.elementor-element-32128717, .elementor-22000 > .elementor-element.elementor-element-32128717.elementor-element-32128717 { margin-top: 110px; } } /* -------------------------------------------------------------------- * 9 THE TOOL NAME ROW ON THE NARROWEST PHONES * * The row of three tool names wraps below 768px, which is intended and * explained in assets/ccx-toolslider.css. At 360 and 375 pixels the wrap * falls after the first name, so one name stands alone on the upper line * with the width of two next to it empty, and the other two share the * lower one. Closing the horizontal gap from 22 to 14 pixels puts the * first two names on the upper line and one below, which is the balance * the German page already has at those widths. * * Only the gap changes. The rail under each name, the numeral and the * type size all stay where the tool slider put them. * -------------------------------------------------------------------- */ @media (max-width: 419px) { .elementor-8073 .cctool-nav, .elementor-22000 .cctool-nav { gap: 6px 14px; } }