/* * wakefly/testimonial-carousel — the one scoped stylesheet this block needs. * * EVERY NUMBER BELOW IS A MEASUREMENT FROM THE UNIT CONTRACT OR ARITHMETIC OVER TWO OF THEM. * Where a value is neither, it says so in its own comment — those are the lines a verdict * should look at first. */ /* * BORDER-BOX, SCOPED TO THIS BLOCK. Neither WordPress core nor this theme sets a global * box-sizing reset, and core's own `* { box-sizing: border-box }` ships inside the block * library stylesheet, which is only enqueued for blocks core knows are on the page. */ .wp-block-wakefly-testimonial-carousel, .wp-block-wakefly-testimonial-carousel *, .wp-block-wakefly-testimonial-carousel *::before, .wp-block-wakefly-testimonial-carousel *::after { box-sizing: border-box; } .wp-block-wakefly-testimonial-carousel { /* The resolved `spaceBetween`, and the only place the number is written down — the transform in assets/js/carousel-view.js and in functions.php is a calc() over it. The shared default is 20 and _testimonial-carousel.scss says 50 on a `.slides` selector the shipped markup never renders; both lose to this unit's own initializeSwiper() call. */ --wf-carousel-space-between: 0px; /* `speed: 500`, measured on the live Swiper instance. */ --wf-carousel-speed: 500ms; /* * THE VIEWPORT MARGIN LADDER, DERIVED FROM THE MEASURED BOXES RATHER THAN FROM THE PROSE. * The inner wrapper measures 1196 / 836 / 596 / 266 and the card inside the viewport * measures 1108 / 756 / 516 / 194, so the side margins are 44 / 40 / 40 / 36. The * contract's own sentence says "44px … identical at all four viewports" and its numbers * say otherwise, on this unit and on both image carousels; the numbers are what this is * built to, and the discrepancy is in the hand-back. * * IT DOES NOT TRACK THE ARROW HERE. On the image carousels the margin is the arrow plus 8 * at every width; on this unit the arrow is a fixed 40 from this widget's own stylesheet * while the margin still steps, because the margin belongs to the shared .swiper rule and * the size does not. * * THE TOP RUNG'S BREAKPOINT IS THE UNMEASURED VALUE: 1024 measures 40 and 1440 measures * 44. 1400 is Bootstrap's xxl and is the breakpoint this widget's own p.name step uses, so * it is the grounded guess; 1200 would reproduce all four captured viewports too. */ --wf-carousel-gutter: 36px; /* * 40x40 AT ALL FOUR VIEWPORTS — measured, and the difference from both image carousels, * whose arrows step 28/32/32/36. It comes from this widget's own `.prev, .next { width: * 2.5rem; height: 2.5rem }` rather than from the shared .swiper-button-* theme, so it does * not respond. */ --wf-carousel-arrow: 40px; /* The glyph is measured 20x20 inside the 40x40 button, at 1440. */ --wf-carousel-arrow-glyph: 20px; /* * THE ROOT IS A FLEX COLUMN WITH A 40px GAP, measured — and on the captured instance the * gap paints nothing, because a gap only appears between two children and this instance * renders no Intro. It is declared anyway: it is the unit's own value, and an instance * with an intro depends on it. * * alignItems and justifyContent both measure `normal`, which is a browser's report for an * untouched flex container, so NEITHER is declared. Inventing `stretch` or `flex-start` * for them would be writing values the source never set. * * `position: relative` is what the two arrows resolve their offsets against: measured * x=72 against a root at x=72, and x=1328 against a root right edge of 1368. */ position: relative; display: flex; flex-direction: column; gap: 40px; } @media (min-width: 768px) { .wp-block-wakefly-testimonial-carousel { --wf-carousel-gutter: 40px; } } @media (min-width: 1400px) { .wp-block-wakefly-testimonial-carousel { --wf-carousel-gutter: 44px; } } /* ------------------------------------------------------------------------------ the frame */ /* * THIS WIDGET RENDERS NO div.container — it is the one of the five that does not, which is why * its 50px side padding is its own and there is no 12px Bootstrap gutter under it. The padding * itself is a block attribute rather than a rule here, so an editor can see it: 24px top and * bottom from the shared `py-4` utility, 50px left and right from * _testimonial-carousel.scss's `padding: 3.125rem` with the vertical axis overridden. The * asymmetry is measured identical at all four viewports and is NOT responsive. * * div.testimonial-carousel-count-N — the wrapper carrying the dead count class. Measured * display block with no padding, background or border of its own, 1196 / 836 / 596 / 266 wide, * which is 1296 - 50 - 50 at 1440. It declares nothing. */ /* * div.swiper — the clipping viewport. Measured 1108x277 at x=166 in a 1440 window. Here the * clipping costs nothing, unlike on both image carousels: this card's content is fluid and * never exceeds the slide. */ .wp-block-wakefly-testimonial-carousel__viewport { position: relative; margin-inline: var(--wf-carousel-gutter); overflow: hidden; } /* div.swiper-wrapper, the track: measured display flex, position relative, translate3d(0,0,0) at rest. `gap` is the resolved spaceBetween, which is 0. */ .wp-block-wakefly-testimonial-carousel__track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--wf-carousel-space-between); transition: transform var(--wf-carousel-speed) ease; will-change: transform; } /* WCAG 2.3.3 is AAA and is not required; three lines, and only the sweep goes. */ @media (prefers-reduced-motion: reduce) { .wp-block-wakefly-testimonial-carousel__track { transition: none; } } /* * ONE SLIDE, EXACTLY AS WIDE AS THE VIEWPORT, which is why one testimonial shows whatever the * count class says. The computed justify-content is literally `center`. * * `visibility` is the measured rest state — swiper-slide-visible on the active slide only. */ .wp-block-wakefly-testimonial-carousel__slide { flex: 0 0 100%; /* * `min-width: 0` IS LOAD-BEARING AND IT IS 123px, MEASURED. A flex item's min-width * defaults to `auto`, which is its MIN-CONTENT size — and this slide's min-content is its * non-shrinking item, 516px wide. So at 390x844 the slide grew from the 270 that * `flex: 0 0 100%` asks for to 516, the media landed at x=68 instead of the contract's * x=-55, AND every step of the track's -100% transform would have been 516 rather than one * viewport. Verified in isolation before it was written: the same three rules with and * without this line put the item at -15 and at +108 inside a 270px box. */ min-width: 0; display: flex; flex-direction: row; justify-content: center; visibility: hidden; } .wp-block-wakefly-testimonial-carousel__slide.is-current { visibility: visible; } /* ------------------------------------------------------------------------------- the card */ /* * article.item.text-center. Measured 1108x277 at 1440, 756x298, 516x298 and 194x394 — in every * case exactly the viewport's own width, so the card FILLS the slide and is not shrink-to-fit. * * THE VERTICAL-FLEX INVERSION IS WHY THE CONTRACT SPELLS THIS `justifyContent: center`: on a * vertical orientation core's `justifyContent` attribute writes align-items * (reference/sources/block-attributes.md). This is a hand-written stylesheet rather than a * block attribute, so the measured property is written directly — align-items: center. The * measured justify-content is `normal` and is therefore not declared at all. * * ITS CHILDREN SHRINK TO FIT BECAUSE OF THAT align-items, and that is the thing to reproduce * rather than a max-width: the blockquote measures 748 wide inside a 1108 card at 1440, and * 516 inside a 516 card at 768 — the same natural text width, clamped by the card at the two * narrow widths and not at the two wide ones. */ .wp-block-wakefly-testimonial-carousel__card { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } /* * .photo — the circular portrait, and the transparent placeholder that stands in for it. Both * measure 128x128 with a 50% radius and object-fit cover; the source states the 128 twice (the * SCSS's `width: 8rem; height: 8rem` and the property's own helper text) and it is measured * once. NO INSTANCE IN THE CRAWL RENDERS AN ACTUAL PHOTO, so the box is measured and the paint * is not. * * The placeholder's own measured backgroundColor is rgba(0,0,0,0) — a circle that paints * nothing and still takes 128px of column height. It gets no declaration of its own beyond the * shared geometry, because a transparent background IS the initial value; the `is-placeholder` * class exists so the markup says which branch rendered. */ .wp-block-wakefly-testimonial-carousel__photo { display: block; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; } /* * p.name. Measured 18px/27px at 1440 and 16px/24px at 1024, 768 and 390 — the ONE responsive * value on this unit, from `@include media-breakpoint-up(xxl)`, whose 1400px threshold only * 1440 clears. 16px/24px is this theme's own body size and inherits, so only the step is * written. paddingTop 10px and marginBottom 0 are measured at every viewport; 27 + 10 = 37 is * the measured box height at 1440 and 24 + 10 = 34 below it. * * IT IS A PARAGRAPH AND NOT A HEADING. The source emits

; the design contract * asks for an h6, and promoting it would change the document outline away from the source this * unit is copying. */ .wp-block-wakefly-testimonial-carousel__name { margin-block: 0; padding-block-start: 10px; color: var(--wp--preset--color--body-text); font-weight: 800; } @media (min-width: 1400px) { .wp-block-wakefly-testimonial-carousel__name { font-size: 18px; line-height: 27px; } } /* * p.role. Measured 16px/24px, weight 400, colour rgb(51,51,51), marginBottom 0 and no padding * at EVERY viewport including 1440 — it does not take the xxl bump that .name does, so nothing * responsive is written here. */ .wp-block-wakefly-testimonial-carousel__role { margin-block: 0; color: var(--wp--preset--color--body-text); } /* * div.stars, the rating row. Measured 116x28 at every viewport: display flex, gap 4px, * paddingTop 8px, and five 20px glyphs — 5 x 20 + 4 x 4 = 116 closes it exactly. * * THE MEASURED justify-content: center IS DELIBERATELY NOT WRITTEN. This row is already * shrink-to-fit inside a column whose align-items is center, so the centring a reader sees is * the PARENT's; declaring it here would centre five glyphs inside a box that is exactly five * glyphs wide. `align-items: center` is the mapping that does apply on a horizontal row. * * `color` IS DECLARED AND PAINTS NOTHING, and that is the measurement rather than an oversight: * the source's `.stars { color: $brand-secondary }` computes to rgb(240,100,0) on this element * and every glyph overrides it with an inline fill attribute. It is written so the computed * value matches; the hand-back says why it is invisible. */ .wp-block-wakefly-testimonial-carousel__stars { display: flex; flex-direction: row; align-items: center; gap: 4px; padding-block-start: 8px; color: var(--wp--preset--color--secondary); } .wp-block-wakefly-testimonial-carousel__star { display: block; width: 20px; height: 20px; } /* * blockquote.quote. Measured 748x60 at 1440 and 1024, 516x84 at 768 and 194x156 at 390 — * the only thing on this unit that changes height across the sweep, and the whole of the * root's 325 → 442 growth. paddingTop 20px and marginBottom 0 are measured; the inner p is * 748x24 at exactly 20px below the blockquote's top edge, and the remaining 16px of the 60 is * that paragraph's own bottom margin, which is this theme's default and is left alone. * * `display: flow-root` IS THE ONE DECLARATION HERE NO KEY MEASURES, and it is arithmetic * rather than taste: without a block formatting context the inner paragraph's 16px bottom * margin collapses out through the blockquote's bottom edge and the box comes out 44 tall * instead of the measured 60. `display` is not among the properties recorded for this node, so * nothing is contradicted; what is reproduced is the measured box. */ .wp-block-wakefly-testimonial-carousel__quote { display: flow-root; /* * `margin: 0` AND NOT `margin-block: 0`, and the difference is 80px of width. Chromium's * UA stylesheet gives

`margin: 1em 40px`, and the INLINE half of that is what * bites: this element is sized fit-content by its parent's align-items, so a 40px margin * either side takes 80px off the space it may fill. Measured with only the block axis * zeroed: 436 wide at 768 against the contract's 516, and 114 at 390 against 194 — where * 516 - 80 = 436 and 194 - 80 = 114 close it exactly. */ margin: 0; padding-block-start: 20px; color: var(--wp--preset--color--body-text); } .wp-block-wakefly-testimonial-carousel__quote > :first-child { margin-block-start: 0; } /* ----------------------------------------------------------------------------- the arrows */ /* * Measured 40x40 at all four viewports, at x=72 and x=1328 — flush to the root's left and * right edges — and at y=258 against a root spanning 118..443, i.e. `top: 50%` less the * measured `margin-top: -22px`. That -22 is Swiper's own half of its 44px * --swiper-navigation-size and does NOT track this button's 40, which is why it is written as * a literal beside a variable size. * * `font: inherit` is a measurement rather than a reset habit: Chromium's UA stylesheet sets * `font: 400 13.3333px Arial` on a