/* ========================================================================== ROUND 31: THREE THINGS A READER FOUND ON A PHONE Every measurement below was taken on the live page at the width it is written against, with the animations running. Nothing here is written into a page; all three corrections are style. ========================================================================== */ /* -------------------------------------------------------------------- 1. THE BUTTON OF A REFERENCE BLOCK IS AS WIDE AS ITS LABEL AGAIN Measured at 375px, home page: Visit website 319 x 46 the whole text column See all references 185 x 46 same section, same page See the full IT security 237 x 46 same section, same page Three pills of one section, one of them running the full width and the other two at the width of their label. On /references/ the same rule caught the second button of a block as well, so "Visit website" and "Read case study" both stood at 319. The full width came in with the phone pass of round 10, and the reason it was chosen is worth keeping: left to themselves the two buttons of a block end up at 158 and 175 pixels, centred, one above the other - two edges where the eye expects one. So the width goes back to the label, and the shared edge is kept a different way: the box that holds the buttons shrinks to its widest child and centres itself, and the buttons stretch into it. One edge, no number to maintain, and it holds in both languages, where the same two labels are 15 and 24 pixels longer. Elementor already agreed with all of this. The widget carries the class elementor-widget__width-auto, which is the builder's own way of saying "as wide as the content"; the phone rule simply outweighed it. Four class names on the widgets, because the rule this answers spends three and stands in a file that is read later. -------------------------------------------------------------------- */ @media (max-width: 767px) { /* The box around the buttons: shrink to the wider of them, then centre. * :has() reaches the direct parent and nothing above it. Where it is not * understood the buttons keep their own widths, which is the state this * section had before round 10 and is still readable. */ .ccref-card .e-con:has(> .ccref-btnw), .ccref-card .e-con:has(> .ccref-btnghost) { width: fit-content; max-width: 100%; margin-inline: auto; } .ccref-card .ccref-btnw.ccref-btnw.ccref-btnw.ccref-btnw, .ccref-card .ccref-btnghost.ccref-btnghost.ccref-btnghost.ccref-btnghost { width: auto; max-width: 100%; /* stretch is the initial value and is written out because the two * buttons of a block only share an edge while they do it */ align-self: stretch; } /* The three boxes Elementor nests between the widget and the visible * pill keep growing into the widget, so the pill is the widget and the * light of the rim sits on the pill and not beside it. That is what * ccfx-v3.css set them to, and it stays. */ /* The primary button carries 22px of padding on the left and 6px on the * right, because the round arrow tile sits in the right corner and needs * the tighter inset - that is the anatomy of this pill everywhere from * 768px up, measured 6px 6px 6px 22px there. The phone rule had evened * both sides out at 20px, which is right for a label centred in a pill * that spans the column and wrong for a pill at the width of its label: * the tile would float 20px inside the right edge. So the inset goes * back where the design has it. * * Five class names: the rule it answers spends four (card, widget twice, * button) in a file that is read later. */ .ccref-card .ccref-btnw.ccref-btnw.ccref-btnw.ccref-btnw .elementor-button { padding-right: 6px; } } /* -------------------------------------------------------------------- 2. THE ROW OF TOOL NAMES IS ONE LINE THAT SCROLLS Measured at 375px, home page, English: row 343 x 78, two lines 1 Warehouse portal 151.4 line 1 2 Operations dash. 187.4 line 2 3 CraftVoice 101.8 line 2 440 pixels of names and 28 of gaps against 343 of column. The row was built to wrap on purpose, and the reason given at the time was that a strip which scrolls sideways hides the third name. That is only true of a strip that hides it: this one starts with the second name cut off in the middle, which is the plainest way there is of saying that the line goes on. The German row wraps the same way at 425 pixels of names. Nothing changes from 768px up, where all three names have stood on one line since the row was built (736 of column against 547 of names). THE RAIL MOVES FROM A PSEUDO ELEMENT INTO THE BACKGROUND. The hair line under the row is drawn by .cctool-nav::after, absolutely placed. Inside a box that scrolls, an absolutely placed child scrolls with the content and the line would travel off to the left. A background does not: it is painted on the padding box of the box itself and stays where it is while the content moves under it. Same gradient, same one pixel, same place - it is only painted by something that stands still. THE BOX GROWS DOWNWARD BY THE LENGTH OF THE GLOW AND TAKES IT OFF ITS MARGIN. A box that scrolls sideways clips vertically as well, and the orange bar of the active name carries a 16px glow that would be cut off at the lower edge. Sixteen pixels of padding at the bottom and eight at the top give both glows room; the same amounts come off the margins, so the row stands exactly where it stood. THE EDGE FADES WHERE THERE IS MORE TO COME. The mask is set from assets/ccx-home31.js, which knows how far the row has been scrolled; without it the row shows no fade and simply scrolls, which is the state of the page today minus the wrap. A mask is used and not an overlay for the same reason as the background above: it belongs to the box, not to the content, and stays put while the names move. -------------------------------------------------------------------- */ @media (max-width: 767px) { .cctool-nav.cctool-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; /* room for the two glows, taken back off the margins */ padding-top: 8px; padding-bottom: 16px; margin-top: -8px; margin-bottom: 2px; /* the rail, now painted by the box instead of by a child of it */ background-image: var(--cctool-rule, linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 100%)); background-repeat: no-repeat; background-position: left bottom 16px; background-size: 100% 1px; -webkit-mask-image: var(--cct31-fade, none); mask-image: var(--cct31-fade, none); } .cctool-nav.cctool-nav::-webkit-scrollbar { width: 0; height: 0; } /* the old rail, replaced by the background above */ .cctool-nav.cctool-nav::after { display: none; } .cctool-nav .cctool-tab.cctool-tab { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-left: 12px; /* Every name carried its own piece of rail while the row wrapped, * because on two lines a single line under the row would have hung in * mid air under the upper one. On one line the row has its rail back * and the pieces would lie on top of it, twice as bright. */ box-shadow: none; } /* Three lengths, set by the script: * start the row stands at its beginning, only the right end fades * mid it has been moved, both ends fade * end it is at its end, only the left end fades * A row that fits its column carries no attribute and no fade. */ .cctool-nav[data-cct31="start"] { --cct31-fade: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%); } .cctool-nav[data-cct31="mid"] { --cct31-fade: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 44px), transparent 100%); } .cctool-nav[data-cct31="end"] { --cct31-fade: linear-gradient(90deg, transparent 0, #000 36px); } @media (prefers-reduced-motion: reduce) { .cctool-nav.cctool-nav { scroll-behavior: auto; } } } /* -------------------------------------------------------------------- 3. NOTHING OF THE SERVICE ICON IS PAINTED BETWEEN ITS TWO RINGS The four icons of the services carousel are 80 by 80 each, and all four are built out of two rings with nothing between them. Measured off the rendered files at eight times their size, against the page ground: disc outer ring three drawings r 0 - 32.1 r 38.7 - 40.1 the one bitmap r 0 - 33.4 r 38.0 - 40.8 Between the disc and the outer ring each drawing also holds two large rounded shapes with a soft white fill and a thin white outline. They are the sheen that lies across the disc, and a mask inside the file cuts them to it. Where that mask does not take, the two shapes paint across the whole drawing and the edge of the drawing cuts them into a straight vertical and a straight horizontal line: a pale square behind the icon, brightest at its lower right corner, with one long arc of an outline crossing it. That is what a reader photographed on a phone. The photograph was matched against the same file rendered with its mask taken out - the square, the corner it is brightest in and the arc all line up. Rendered with the mask in place, in the three engines here, none of the three is there. So the drawing is not changed and the file is not touched: the page states a second time, in a way that does not depend on an SVG mask, what the file already says. Everything outside the two rings comes off the picture, and the ring itself stays the ring the drawing carries, with its gradient from nine to two hundredths of white - drawing it again from a stylesheet would have meant one flat value for a ring that is four times brighter at one side than at the other. THE NUMBERS. The percentages are read against the shorter side of the box, which is 40px, so they hold at any size the icon is set to. Each edge is put three to four tenths of a pixel clear of the nearest ink, which is more than the antialiasing of either ring reaches: everything keep to 85% = 34.0 drop to 94% = 37.6 keep to 103% = 41.2 drawings keep to 82% = 32.8 drop to 96% = 38.4 keep to 101% = 40.4 The wider of the two is the one every picture gets, because it is the one that fits both sets of rings; the drawings are then narrowed by a rule of their own, because they are the ones that can leak and the narrower the kept band, the less of the leak can stand in it. That way round on purpose: if the second rule is ever missed, a drawing falls back on a band that is too wide rather than one that is too tight, and too wide leaves a little of the leak while too tight would cut the ring. The clip is the same statement made a second way, for an engine that does not understand a mask: it takes the corners of the box off, and with them the two straight edges that make the square read as a square. WHAT THIS DOES NOT REACH. Where the mask inside the file fails, the two outlines still cross the two kept bands. Inside the disc that is where the sheen belongs and it is what the drawing intends; in the outer band what is left is a pair of arcs about two pixels wide. Both are a long way from a square, and the fix that removes even those is to cut the decoration to the disc in the four files themselves, which is a change to the media library and not to a stylesheet. Scoped to .services-slider, which stands on the two home pages and nowhere else. The icon carries the data id edd94be, and the copies of the project carousel carry the same one. -------------------------------------------------------------------- */ .services-slider [data-id="edd94be"] img { -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0 85%, transparent 85% 94%, #000 94% 103%, transparent 103%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0 85%, transparent 85% 94%, #000 94% 103%, transparent 103%); -webkit-clip-path: circle(52%); clip-path: circle(52%); } /* The three that are drawings. Their two rings are narrower than those of * the one bitmap, and they are the three a mask inside the file can fail * on, so their band is closed in as far as their own ink allows. */ .services-slider [data-id="edd94be"] img[src$=".svg"] { -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0 82%, transparent 82% 96%, #000 96% 101%, transparent 101%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0 82%, transparent 82% 96%, #000 96% 101%, transparent 101%); }