/* ========================================================================== THE REFERENCE CLUSTER ON SMALL SCREENS Six pages, four shapes, one stylesheet. Every rule starts with the body class inc/ccx-mobrefs.php hangs on the page, because three of the class names below are shared with the home page and that page belongs to a different pass: .ccref-card .ccref-content .ccref-mock six blocks on the home page, twelve on /references/ .custom-slider the projects carousel of the home page, the card deck of /expertise/ NOTHING IN HERE REACHES 1025px AND UP. Every block is inside a media query that ends at 1024px, so the desktop keeps the look it has today. The numbers each rule is built on were measured on the rendered page at 360, 375, 390, 414, 768, 834 and 1024 pixels; they are written down beside the rule that uses them. ========================================================================== */ /* ========================================================================== 1. /references/ - THE NUMERALS WITH TWO DIGITS The big numeral of a reference block is an ::after on the text column. The home page shows six blocks and never gets past a single digit. This page shows twelve, so blocks ten, eleven and twelve carry a numeral that is twice as wide as any numeral the design was drawn for. MEASURED ON THE PHONE (375px, the same at 360, 390 and 414) text column 319px wide headline 296px wide, starting 12px in, so it ends at 308 single digit 78.9 x 150px, right edge on the column edge, so it starts at 240 and lies over the last 68px of the headline "10" and "12" 157.9 x 150px, starting at 161, over 147px of the headline - half the line ink, single digit 68 x 150 x 0.07 = 714 units over the headline ink, two digits 147 x 150 x 0.07 = 1543 units, more than twice The ink figure is what the eye reads: how much of the numeral is printed across the words. Bringing the two digit blocks back to the value of their neighbours takes both a smaller face and a paler colour, because the size alone would have to drop to 106px and the numeral would stop reading as the same design element. 132px and 0.045 138.9 x 132px, starting at 180, over 128px of the headline 128 x 132 x 0.045 = 760 units, against 714 for a single digit. The same amount of ink, and the numeral keeps 88 percent of its size. MEASURED ON THE TABLET (768px, and again at 834 and 1024) text column 704px at 768, 960px at 1024 headline 520px wide, flush left, so it ends at 520 single digit 126.3 x 240px, right edge on the column edge: starts at 577.7 at 768, well clear of the words "10" and "12" 252.6 x 240px, starting at 451.4, which puts 68.6px of numeral on the last line of the headline - the only breakpoint where a numeral touches the words on this page at all 172px 181 x 172px, starting at 523 at 768: three pixels clear of the headline, nothing else moves. At 1024 the numeral starts at 779 and the question does not arise. WEIGHT The phone rules of ccfx-v3.css reach this pseudo element with four class names. These rules carry the body class and the block class on top, so they win on their own weight and not on load order. -------------------------------------------------------------------- */ @media (max-width: 767px) { body.ccxmr-refs .ccref-card.ccref-n10 .ccref-content.ccref-content.ccref-content::after, body.ccxmr-refs .ccref-card.ccref-n11 .ccref-content.ccref-content.ccref-content::after, body.ccxmr-refs .ccref-card.ccref-n12 .ccref-content.ccref-content.ccref-content::after { font-size: 132px; color: rgba(255, 255, 255, 0.045); } } @media (min-width: 768px) and (max-width: 1024px) { body.ccxmr-refs .ccref-card.ccref-n10 .ccref-content.ccref-content.ccref-content::after, body.ccxmr-refs .ccref-card.ccref-n11 .ccref-content.ccref-content.ccref-content::after, body.ccxmr-refs .ccref-card.ccref-n12 .ccref-content.ccref-content.ccref-content::after { font-size: 172px; } } /* ========================================================================== 2. /references/ - THE PICTURE ON A TABLET IS BIGGER THAN ON A DESKTOP From 1025px up the block stands in two columns and the picture takes the left half. Below that it stacks, and the picture takes the full width of the card - which on a tablet is more width than the desktop ever gives it. MEASURED 1440px, two columns picture 640 x 503 1024px, stacked picture 960 x 755, so 50 percent wider and 250px taller than on a desktop screen 768px, stacked picture 704 x 553 block height 723px on a desktop, 1302px at 768, 1504px at 1024 page height twelve blocks: 15,864px at 768, 18,048px at 1024 A picture that fills a tablet screen on its own pushes the words that belong to it a full screen further down, twelve times over. Capping it at 600px puts it just under the desktop size and keeps it centred over the text it introduces. 600px picture 600 x 472 at both widths block height 1221px, so 81px less at 768 and 283px less at 1024 page height 12,996px at 1024, a saving of 3,396px Only the outer box is capped. The picture inside keeps width:100% and the height:auto that the earlier pass gave it, so it keeps its drawn proportions and nothing is stretched. -------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { body.ccxmr-refs .ccref-card .ccref-mock.ccref-mock { max-width: 600px; margin-left: auto; margin-right: auto; } } /* ========================================================================== 3. THE THREE CASE STUDIES - THE CLIENT LINK IS 16 PIXELS TALL Every case study closes its "Visuals and Documentation" paragraph with a link to the client site, in a heading widget of its own. The element id is the same on all three pages. MEASURED at 375px: the link box is 86 x 16 on /esn/, 169 x 16 on /immoscout/ and 106 x 16 on /qiagen/. Sixteen pixels is half of what a finger needs, and the link stands alone on its line, so there is nothing beside it that a missed tap could hit instead. The padding is answered by a negative margin of the same size, so the line box keeps the height it has now and no paragraph below it moves. 14px above and below turns 16 into 44, which is the size a touch target is asked for. -------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccxmr-case [data-id="6dffb12"] a { display: inline-block; padding-top: 14px; padding-bottom: 14px; margin-top: -14px; margin-bottom: -14px; } } /* ========================================================================== 4. THE WAREHOUSE ARTICLE - LINE LENGTH ON A TABLET The article is one column of text with pictures between the paragraphs. The column follows the width of the window, and at 1024px that gets long. MEASURED, characters per line 1440px the paragraphs stand 783px wide and run 76 to 95 characters, which is the measure the article was written and read at 768px 716px wide, 88 to 97 characters - still close to the desktop 1024px 972px wide, 96 to 133 characters, half again as long as the line the desktop shows A reading column that grows past the desktop measure the moment the window gets wider than a phone is the wrong way round. Capping the inner box at 800px holds the paragraphs at 783px, exactly the desktop measure, and centres the whole column - text, pictures and the related articles at the end move together, so nothing steps out of line. At 768px the box is 736px wide already and the rule changes nothing. THE SELECTOR NAMES THE ARTICLE AND NOTHING ELSE The page is built from four Elementor documents: the header template, the theme template of a single post, the article itself and the footer template. All four open with a boxed container, so a rule written against .e-con.e-parent > .e-con-inner alone reaches every one of them - measured at 1024px it pulled the header bar and the footer in to 800px as well. Naming the document type keeps the cap inside the article, where the reading column lives. -------------------------------------------------------------------- */ @media (min-width: 769px) and (max-width: 1024px) { body.ccxmr-study [data-elementor-type="wp-post"] > .e-con > .e-con-inner { max-width: 800px; margin-left: auto; margin-right: auto; } } /* ========================================================================== 5. /expertise/ - THE CARD DECK HAS NO CONTROLS ON A PHONE The deck holds twelve cards and shows one at a time below 768px. Both arrow buttons are in the markup at every width, and the page takes them out with display:none up to 768px, which leaves a reader with no sign that there are eleven more cards and no way to reach them except a swipe that nothing announces. There is no pagination either. This is the same repair the services carousel of the home page needed in an earlier pass, and it is built the same way, so the gesture reads the same on both pages. HOW IT IS ANCHORED The buttons are children of .elementor-main-swiper, which clips at its own edge. They escape that clip because they are measured against .elementor-swiper one level up, which is the nearest positioned ancestor and does not clip. .elementor-main-swiper must therefore stay unpositioned, or the buttons would be cut off at the top edge of the deck. bottom: calc(100% + lift) the bottom edge of the button lands 12px above the top edge of the deck right: inset 20px, which is where the deck ends: Elementor gives the deck width:calc(100% - 40px) once arrows are on and centres it, so the pair lines up with the right edge of the card underneath 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 The previous button is shifted left by its own width plus the gap, so the pair keeps its spacing without a second number to maintain. ROOM FOR THE ARROWS MEASURED at 375px: the heading block above the deck ends at exactly the same pixel where the deck begins - there is no air between them at all. A button placed above the deck would print on the headline. The widget is therefore pushed down by 72px, which the pair then takes: 48px button + 12px to the deck = 60px, leaving 12px to the headline The margin sits on the widget and not on .elementor-swiper because the widget is a flex item of the section container, and flex items do not collapse their margins into anything. THE TABLET HAS THE SAME PROBLEM IN A DIFFERENT PLACE From 768px the page does show both buttons, but on their desktop numbers: 100px above the deck, which on a desktop is the empty right hand end of the heading band. On a tablet the headline needs three lines instead of two and its last line runs into that end. MEASURED, overlap of the previous button with the last headline line 768px 80 x 66px - the whole button stands on the words 834px 18 x 66px 1024px none, the line ends at 671 and the button starts at 843 1440px none The two widths that collide are answered the same way as the phone rather than with a rule that only holds between 768 and 850: the pair is placed above the deck and the deck is pushed down to make room. That gives one placement for every width below 1025 instead of three, and the arrows keep the 80px size and the 20px distance they have on a desktop. 80px button + 20px to the deck = 100px, and 124px of margin leaves 24px between the headline and the top of the buttons FROM 1025px UP NOTHING CHANGES. -------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccxmr-exp .custom-slider { --ccxmr-inset: 20px; --ccxmr-btn: 80px; --ccxmr-gap: 12px; --ccxmr-lift: 20px; } body.ccxmr-exp .custom-slider .testimonial-slider { margin-top: 124px; } body.ccxmr-exp .custom-slider .elementor-swiper .elementor-swiper-button { display: flex !important; top: auto !important; bottom: calc(100% + var(--ccxmr-lift)) !important; left: auto !important; right: var(--ccxmr-inset) !important; width: var(--ccxmr-btn) !important; height: var(--ccxmr-btn) !important; margin: 0 !important; transform: none !important; } body.ccxmr-exp .custom-slider .elementor-swiper .elementor-swiper-button-prev { transform: translateX(calc(-100% - var(--ccxmr-gap))) !important; } } /* On a phone the pair is smaller and stands closer to the deck: 48px is the size the other carousels of the site use down there and stays above the 44px a finger needs, and 72px of margin holds the same 12px of air on both sides of the pair. */ @media (max-width: 767px) { body.ccxmr-exp .custom-slider { --ccxmr-btn: 48px; --ccxmr-lift: 12px; } body.ccxmr-exp .custom-slider .testimonial-slider { margin-top: 72px; } } /* ========================================================================== 6. /expertise/ - THE SERVICE CARDS STAND TALLER THAN THEIR CONTENT The six service cards are told to be 490 to 511px tall on a tablet. That number was set for a row of two cards, where the shorter one has to reach the height of the taller one. Below 1025px the cards stand one under the other and there is nothing to match, so the number only prints empty space. MEASURED at 768px: every one of the six cards carries 82px of empty space below its last line. 6 x 82 = 492px of nothing in one section. At 375px the page already lets the cards find their own height, which is what the rule below restores for the widths in between. -------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { body.ccxmr-exp [data-id="ccd43c0"] > .e-con { min-height: 0; } } /* ========================================================================== 7. /expertise/ - THE THREE REASON BLOCKS TURN CENTRED ON A PHONE "Expert Team", "Customized Solutions" and "Client-Centric Approach" each consist of a short title and one explaining line under it. Both parts sit in heading widgets, which is why the explaining line is set in a heavier face than the body copy of the page - on every screen, by design. MEASURED, title and line together 1440px title 44px / 700 / start line 24px / 700 / start 375px title 24px / 700 / CENTER line 16px / 700 / CENTER The phone is the only width where these blocks are centred. A centred title over a centred four line paragraph gives the eye no edge to return to, and the fourteen other paragraphs on the same screen are flush left, so the three blocks read as if they belonged to a different page. Only the alignment is touched, and only below 768px. Size and weight stay where the design put them, which is why the blocks still read as three reasons and not as three more paragraphs. WEIGHT OF THE RULE The page holds the alignment through page, element and heading class. The doubled heading class settles the tie. -------------------------------------------------------------------- */ @media (max-width: 767px) { body.ccxmr-exp [data-id="a347177"] .elementor-heading-title.elementor-heading-title.elementor-heading-title, body.ccxmr-exp [data-id="484992c"] .elementor-heading-title.elementor-heading-title.elementor-heading-title, body.ccxmr-exp [data-id="0db020c"] .elementor-heading-title.elementor-heading-title.elementor-heading-title, body.ccxmr-exp [data-id="97d94c4"] .elementor-heading-title.elementor-heading-title.elementor-heading-title, body.ccxmr-exp [data-id="bd9353a"] .elementor-heading-title.elementor-heading-title.elementor-heading-title, body.ccxmr-exp [data-id="f72d7f9"] .elementor-heading-title.elementor-heading-title.elementor-heading-title { text-align: left; } } /* rv:20260831a cache refresh */