/* ========================================================================== ROUND 42 — the Success-stories video facade. Pairs with build/js/proposed/r42-video.js. Ashik chose option (a) on 26 Aug. v2, 26 Aug — rewritten after the review team BLOCKED v1 (findings L1, L1b, L8). 🔴 EVERY SELECTOR HERE KEYS OFF `.r42-facade` / `.r42-playing`, CLASSES ONLY THE SCRIPT ADDS. If the script does not load or throws, this file matches nothing and the original YouTube iframe renders exactly as it does today. Nothing is ever hidden by CSS alone. NO MEDIA QUERY, ON PURPOSE. The defect is driven by PLAYER width, not viewport width — YouTube serves its compact 4:3-cover player below roughly 480px of player width, which on this page means everything up to about vw 700 (measured: 375->337.5, 440->396, 479->431, 600->440, 767->607). And Ashik approved the facade itself, not a phone-only variant: "we put our own cover image with a play button, and YouTube only loads when someone taps it". A width-gated facade would also make the markup differ by width for no benefit. 🔴 THE BOX IS NOT ALWAYS 16:9. v1's header claimed the box "already carries aspect-ratio:16/9 ... from Webflow's .w-video". THAT IS FALSE and it is the assumption that produced the v1 defect (review L1/L2). What is actually true: * `position:relative` IS from Webflow (`shared.css .w-video`). * `aspect-ratio:16/9` is added by prq-band, page-scoped to `/` and `/case-studies`, and ONLY inside the <=991 bands. It is never applied on /growth /efficiency /transaction, and never at >=992 anywhere. * everywhere else the shape comes from an inline `padding-top:56.17%` hack fighting an unscoped `.video{height:468px}` in shared.css, so the used height is max(468px, padding-top) and the box ratio ranges 0.82 to 1.78. * and below 480 a third rule takes over — `@media (max-width:479px){ .video{ width:90vw; height:200px } }` — which is why the phone boxes are 200px tall and not 16:9 either. (This line was missing from the first version of this header; the code review caught it. The inventory is now complete.) Measured worst case: 384x468 at vw 480 = ratio 0.821. Under `object-fit:cover` that threw away 53.8% of the frame width — re-introducing, on three of the five pages, the exact edge-loss this round exists to cure. Hence `contain` below. ========================================================================== */ /* the facade fills the authored box exactly */ .r42-facade > .r42-play, .r42-playing > .r42-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .r42-facade > .r42-play { padding: 0; margin: 0; background: #000; /* the letterbox colour, see below */ cursor: pointer; overflow: hidden; border-radius: inherit; /* follow whatever rounding the slide already has */ } /* 🔴 `contain`, NOT `cover` — review finding L1/L1b, a BLOCK on v1. `cover` fills the box by cropping whatever does not fit. That is only safe if the box is 16:9, and on this site it very often is not (see the header). On /growth, /efficiency, /transaction it cost up to 53.8% of the frame width, and on /case-studies slide 1 up to 19% — while TODAY'S iframe simply letterboxes and loses nothing. `contain` reproduces today's letterbox exactly: it is a pixel no-op wherever the box already is 16:9, and it is never worse than today at any width on any page. The `background:#000` above paints the bars, which is the same black YouTube paints into the iframe now. It is also what makes the 4:3 fallback posters safe rather than dangerous. */ .r42-facade > .r42-play > .r42-poster { width: 100%; height: 100%; object-fit: contain; display: block; } /* the play mark — a rounded rectangle with a triangle, drawn in CSS so there is no extra request and nothing to letterbox. 🔴 SIZED IN px, NOT em — review finding L8. v1 used `4.2em / 3em` with the comment "so it scales with the box". `em` scales with the WRAPPER'S FONT-SIZE, which on this site has nothing to do with the box, so v1 did three wrong things at once, all measured: the mark was 67.2px wide on `/` and 58.8px on the other four pages AT THE SAME VIEWPORT (against standing rule 12, equal sizes site-wide); it JUMPED at the 991/992 seam on `/` (box +33%, mark -18%, because the root font-size is fluid above 992 and restarts low at the breakpoint); and the effect ran backwards from the stated intent — largest on the smallest phone (23% of the box) and smallest on desktop (5%). A constant px size is what rule 12 asks for: one play button, one size, on every page at every width. 64x46 is the midpoint of v1's own measured 55-75px range, so it is the smallest visual change from what was already reviewed by eye. */ /* 🔴 A 56px CIRCLE, NOT A 64x46 ROUNDED RECTANGLE — design review, 26 Aug. The rounded rectangle is YOUTUBE'S silhouette, and it was the only non-circular control anywhere near it: this site's own slide arrows are solid circles, measured `.frame-10000019235` at 40x40 below 768 and 56x56 from 992 up. At 440 the 64x46 plate came out 1.6x the arrow's diameter and read as third-party chrome dropped onto the slide. 56 and "circle" are tokens this design system already uses, so the mark now belongs to the page instead of to YouTube. It is also smaller at 320, where 64px was landing on the speaker's chin. Still ONE fixed size at every width on every page, which is the whole point of the earlier em -> px change (standing rule 12); the shape changed, the guarantee did not. The FILL stays dark: an orange mark measures 1.19:1 against these orange posters and disappears, while the dark plate measures 5.38:1. */ .r42-facade > .r42-play > .r42-play-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .72); transition: background .18s ease, transform .18s ease; pointer-events: none; } /* the triangle, nudged right of centre so it reads as centred INSIDE a circle — an optically centred play glyph always sits slightly right of the true centre */ .r42-facade > .r42-play > .r42-play-mark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-38%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; } /* hover / focus. `:focus-visible` so a mouse click does not leave a ring, but a keyboard user always sees one. */ /* 🔴 HOVER KEEPS THE DARK PLATE — review finding "hover collapses contrast to 1.19:1". v2 turned the whole plate #ff9633. Measured against the actual poster pixels behind it — one of these frames is a large orange field, rgb(246,129,45) — that put orange on orange at a contrast ratio of 1.19:1, so the play button VANISHED on hover, which is the opposite of what a hover state is for. (At rest the dark plate measures 5.38:1 against the same pixels.) So the plate stays dark and gets darker, and the brand orange moves to the triangle, where it sits on a near-black plate and cannot be washed out by any poster. The scale still gives the motion cue. */ .r42-facade > .r42-play:hover > .r42-play-mark { background: rgba(0, 0, 0, .85); transform: translate(-50%, -50%) scale(1.06); } .r42-facade > .r42-play:hover > .r42-play-mark::after { border-left-color: #ff9633; /* the site's orange */ } /* 🔴 THE FOCUS RING — INSET, AND TWO-TONE. This took three attempts; both earlier ones LOOKED right in the computed style and painted nothing a person could see. ATTEMPT 1 was `outline: 3px solid #ff9633; outline-offset: 3px` — drawn OUTSIDE the button, and the button fills a video box that on / and /case-studies sits inside `.section_mask.w-slider-mask{overflow:hidden}`. The ring was clipped away entirely; a pixel probe found ZERO orange pixels in every band it could occupy. ATTEMPT 2 moved it inside with `outline-offset:-3px`. It painted — and was still invisible, because #ff9633 IS THE POSTER. These videos are shot on the brand orange: the pixels under the ring band measure rgb(254,150,53), so the measured contrast was 1.00:1 on 12 of 15 rows and never better than 1.17:1. WCAG 2.4.11 wants 3:1. 15 of 15 rows failed. And the `box-shadow: inset ...` added as a fallback painted nothing at all: an inset shadow is drawn on the element's own background, UNDERNEATH its children, and the poster is width:100%/height:100%, so it covered the shadow on every page (measured delta 0). SO: WHITE OUTSIDE, NEAR-BLACK INSIDE, and the dark half on a ::after that stacks ABOVE the poster instead of behind it. One of the two always contrasts, whatever frame the video opens on — light artwork, dark artwork or brand orange. This is the standard double-ring indicator and it is the only version of this that has been shown to paint. NOTE this is a regression guard, not a nicety: today the focusable thing in that box is an