/* ========================================================================== CC MOBLP - the three service and landing pages on narrow screens /services/, /it-security/ and /process-tools/ were built one after the other and each of them was finished on a wide screen. This file carries the corrections that a measurement between 360 and 1024px asked for, and nothing else. Everything here is additive: the modules that own those pages are only read, never edited, and every rule sits behind a body class this module writes, so a page it does not run on cannot be reached by any selector in here. HOW THE NUMBERS WERE TAKEN Every figure below comes from the rendered page on the staging copy, at 360, 375, 390, 414, 768, 834 and 1024 pixels, with the animations running. Two instruments are used and they answer different questions: tools/r22-moblp/ovf.py how far the document can be dragged sideways, sampled 24 times over twelve seconds, because the travelling light on a pill moves and a single reading catches it anywhere in its turn tools/r22-moblp/joint.py how many rows of untouched ground a reader really sees between two sections: it counts the run of quiet image rows that contains the boundary, so padding counts and an invisible wrapper does not WHAT IS FIXED 1. The travelling light of the call to action on /services/ made the whole document wider. Section 1. 2. /services/ lost the section rhythm of its two neighbours, on phones and on tablets. Sections 2 and 3. 3. Two card blocks of /services/ centre their lines on a tablet and end up three to eight pixels beside the headline above them, and the lone card of the third line lands far off. Section 4. 4. Controls too small for a thumb. Section 5. 5. The trust carousel of /services/ is forty pixels narrower than every other card on the page. Section 6. WHY MAX-WIDTH 1024 AND NOT A POINTER QUERY The whole site draws its line at 1025px: canvases, dragging, the glass lens and the sticky background all start there. A second, different line drawn from pointer capability would be a second habit to remember, and it would also miss a laptop with a touch screen in exactly the way the 1025px line does not. ========================================================================== */ /* -------------------------------------------------------------------- 1. THE LIGHT STAYS ON THE PILL (/services/, contact call to action) The pill is an anchor container that carries two effects at once: the specular rim, whose halo is a child box reaching 20px beyond the pill on every side, and the star border, whose light is a child span as wide as the pill that travels a full turn around it. assets/ccx-star.css gives every host of that light overflow: hidden, and on this one host it loses: the container default of the page builder, .e-con { overflow: var(--overflow) }, carries the same weight and wins on order. The light therefore leaves the pill, and on a phone it leaves the page with it. Measured at 360px, 24 readings over twelve seconds: 39 66 92 0 0 0 0 0 0 0 71 46 20 20 46 71 0 0 0 0 0 0 0 93 The zeros are the part of the turn in which the light is on the left half of the pill. Everywhere else the page can be dragged sideways, up to 93px, in a slow beat that follows the seven second turn. From 768 up the pill has room beside it and the document stays put, which is why nobody had seen it. A clip path was tried first and rejected by measurement: it does cut the light where it should, and the page still moved by up to 86px. Clipping a path is a painting operation and takes nothing out of the scrollable area an ancestor computes. Reading zero while a light travels visibly past the pill would have been the worse state of the two, because the drag would have lost its visible cause. overflow: hidden does take it out. Same width, same twenty readings, all of them zero. It costs the 20px halo of the specular rim below 1025px. That is what the two sister pills of the same family already look like: the one on /it-security/ (cs15h001, cs15h004) and the two on /process-tools/ (7c000006, 7c0000cb) all carry ccfx-specular and the star together and all of them clip, at every width. Above 1024 this pill keeps its halo, where there is room for it. The declaration is marked important, and that is the whole reason the rule in assets/ccx-star.css does not already do the job: the page builder writes style="overflow: visible" onto this container as an attribute, and an attribute outranks every stylesheet that does not say important. Four classes in the selector would otherwise have been plenty. -------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccmb-svc .elementor-element.ccsa-ctapill.ccx-starborder { overflow: hidden !important; } } /* -------------------------------------------------------------------- 2. THE RHYTHM OF THE SECTIONS ON A PHONE (/services/, below 768px) Counted as the run of quiet rows that contains the boundary, the two landing pages beside this one hold a steady beat at 375px: /it-security/ 76 80 76 78 76 76 /process-tools/ 68 82 128 76 77 78 88 /services/ ran 64, 55, 39, 35, 88, 62, 90, 100 before this module. The two tightest joints are the ones a reader feels: after the block of Shopify themes the next section badge was 39 rows away, and after the note on where our scope ends it was 35. Each joint below gets the distance it was short of 76, added to the margin the section already carried. The three joints that are not listed stand at 88, 91 and 100 rows: more air than the target, which is not a fault, and shrinking a section that already reads well would be a change without a reason. The values are printed with the page number in front of them, from ccx_moblp_svc_air() in inc/ccx-moblp.php, because the page number differs between the live site and the staging copy. The same goes for section 3. Below 768px no section of this page carries a bottom margin, so what is set here is the whole gap. One breakpoint up that is no longer true, see section 3. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- 3. THE SAME RHYTHM ON A TABLET (/services/, 768 to 1024px) At 768px the neighbours open up to 146 to 149 rows (/it-security/) and 127 to 150 (/process-tools/). /services/ stood at 74 114 223 80 248 86 101 135 so four of its eight joints were roughly half of what the page next to it uses, while three others were already airier than the target. The four short ones are corrected to 146, the others are left where they are. From 768px up four of these sections carry a bottom margin, and at such a joint the two margins do not add: the gap that appears is the larger of the two. Setting 32 against a bottom margin of 60 therefore changed nothing at all, measured. The figures in ccx_moblp_svc_air_tablet() are consequently the whole gap that is wanted, not a difference, and the table there carries both columns it was worked out from. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- 4. CARD LINES START WHERE THE HEADLINE STARTS (/services/, <= 1024px) Two of the four card blocks on this page set their row to centre its lines, the other two do not. On a tablet that is visible, because a line of two cards does not quite fill the row: 768px cards begin at 19, headline and full width blocks at 16 834px 20 against 16 1024px 24 against 16 and the third card of the process tools block, alone on its second line, was centred as a line of its own: it began 176px right of the cards above it at 768, 193px at 834 and 238px at 1024. Both follow from justify-content: center on the row. Setting it to the start is what the other two card blocks of this page (8f71088 and 6e1d30b) already do, and it puts every line on the same edge as the headline above it. Measured after the change, at 768 and at 1024: every line of both blocks begins at 16, the lone card included. Above 1024 nothing changes. Three cards fill the row there exactly, a centred line and a line at the start are the same line, and both blocks already begin at 112 like everything else on the page. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- 5. CONTROLS BIG ENOUGH FOR A THUMB Every shape in this section is already an inline-flex box that centres its own content, so a minimum height grows it around its text without moving anything inside. The rows they sit in are flex rows with a gap, not lines of text, so a taller pill pushes the next row down instead of overlapping it. 40px rather than 44: the pills are quiet, secondary shapes and the pages keep their look. The two controls that really were too small to aim at are text links inside a card, and those get a hit area of 45px without changing anything that is drawn. -------------------------------------------------------------------- */ @media (max-width: 1024px) { /* Reference chips under a service text, /services/. 30px before. */ body.ccmb-svc .ccsvc-refs .elementor-heading-title .ccsvc-chip.ccsvc-chip { min-height: 40px; } /* The chips beside the two app blocks, /services/. 28px before. */ body.ccmb-svc .ccsa-chips .ccsa-chiprow .ccsa-chip, body.ccmb-svc .elementor-widget-html .ccsa-chiprow a.ccsa-chip.ccsa-chip { min-height: 40px; } /* The source pill of a rule card, /it-security/. 32px before. */ body.ccmb-sec .ccsec .ccxrules-card .ccxrules-src .elementor-heading-title a { min-height: 40px; } /* Expand and collapse the questions, /it-security/. 26px before, and it is a bare word in a corner, which is the hardest kind of thing to hit. The padding grows the button around the word; the negative margin on the block axis gives the row its old height back, so the bar above the questions does not move. */ body.ccmb-sec .ccsec.ccsecp-faq .ccsecp-faqall { min-height: 40px; padding: 4px 10px; margin-block: -7px; margin-inline-end: -10px; } /* The "Visit Site" link of a reference card in the trust carousel of /services/. It measured 79 by 17. The card is an embedded template shared with the home page, so the body class this module writes is what keeps the rule on this page. An inline level box does not raise the line it sits on through padding, so the area under a thumb grows to 45px and nothing in the card moves; the link paints no ground of its own, so nothing new becomes visible either. The same treatment reaches the project cards further down through the block printed with the page number in it. */ body.ccmb-svc .elementor-testimonial__text .elementor-button-wrapper > a.elementor-button.elementor-size-sm { padding-block: 14px; margin-block: -14px; } } /* -------------------------------------------------------------------- 6. THE TRUST CAROUSEL IS AS WIDE AS EVERYTHING ELSE (/services/) The page builder keeps room beside a carousel that shows arrows, and it does so twice over: twenty pixels of margin on each side of the deck, and .elementor-arrows-yes .elementor-main-swiper { width: calc(100% - 40px) } on top of that. Undoing either one alone moves the deck without widening it, or widens it past its own box; both have to go. The width declaration is marked important in the page builder's own stylesheet, which is why the rule below repeats the mark on that one property and on no other. Those twenty pixels were meant for arrows standing left and right of the deck. On this site the arrows sit above it, so they buy nothing and the card ends up narrower than every other card on the page: 303 against 343 at 375px, 696 against 736 at 768px, 952 against 992 at 1024px. The same correction was already made for the tools slider and for the project slider in earlier rounds; this carousel was missed because its template is shared with the home page. The body class keeps the rule on /services/, and the arrows are untouched: they stand above the deck, not beside it, so a wider deck cannot reach them. .elementor-main-swiper is position: static and must stay that way. Giving it a position would make overflow: hidden of the carousel base clip the arrows. -------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccmb-svc .elementor-widget-testimonial-carousel .elementor-main-swiper.elementor-main-swiper { width: 100% !important; margin-inline: 0; } } /* -------------------------------------------------------------------- 7. WHAT WAS LOOKED AT AND LEFT ALONE Named here so the next round does not measure it twice. All of it at 360, 375, 390, 414, 768, 834 and 1024. - The heavy backgrounds are off below 1025px, and it is written down: report/r22-moblp/stg-before/gate.json lists the classes on the root element per width. ccx-sbg-on, ccx-bgmolten-on, ccx-bgblinds-on and ccx-bgterm-on appear at 1440 and at no narrow width. The glass lens is off in the same way: below 1025 the surfaces carry the milk glass fallback, above it they carry backdrop-filter: url(#ccg-lens-N). - Two dot field canvases stay on below 1025px, on /process-tools/ only. They are the drawn texture of the idea cards, not a background: the printed pattern they replace is switched off while they run, and they answer a touch as well as a pointer. They rest when nobody touches them. Left as designed; the size is in the report. - The serpentine path of /process-tools/ becomes one column below 768px and the line stands upright beside the stations: canvas 367px wide, stations all at x 16, circles 44px. It is right, and it stays. - The board of the same page is one column of 305px cards below 768px and two columns from there, its hint reads "tap a card or a figure", and the panel behind a card rises from the bottom edge. Right as it is. - The ghost numerals of the tool blocks stand at right: 8px from 768px up and are off below that, which is what the design asks for. - The upright timeline of /it-security/ and the project timeline of /services/ both put the numbered tile on the line and the text beside it below 1025px. Same habit on both pages, so both stay. The tiles of the project timeline are fully inside the page: 46px wide at x 20, against a gutter of 16. - The arrows of both carousels on /services/ measure 44 by 44 below 768px and 80 by 80 above it, and both stand above their deck at x 16 and 86. - The questions of /process-tools/ have a 54px tall row to press at 375px; only the anchor inside it is short, and the row is what carries the press. - /services/ carries no services carousel. That slider lives on the home page only, so the arrows of round 11 are not a subject here. -------------------------------------------------------------------- */