/* ============================================================ ONLINE TRAINING — the page's own bridge. Loaded after `pag-v6-elementor.css` and only on this page. ============================================================ */ /* ------------------------------------------------------------ 1. EVERY CARD'S CHILDREN ARE ITS OWN Five of this page's blocks are flex columns or grids whose children v6 styles as flex ITEMS, and a flex property only means anything on a flex item. Elementor's wrapper is the item, so each of these landed on something that was not one and did nothing at all: .fc-tag{ align-self:flex-start } the "Free" chip .fc .btn{ align-self:stretch; margin-top:auto } .cert-fig img{ position:absolute; inset:0 } .titles li{ display:flex; flex-direction:column } .area-head{ display:grid; grid-template-columns:56px minmax(0,1fr) } `.fc-tag` is the clearest: without `align-self` the span stayed `display:inline` and the chip lost its box — 26px against v6's 31. `.fc .btn{margin-top:auto}` is what pushes the button to the foot of a card so three cards of unequal copy line their buttons up; on a wrapper it was ignored and the cards came out 36px short. `display:contents` takes the wrappers out of the box tree so v6's own children are the flex items again. It does NOT change the DOM — anything selecting through it still misses — which is why §2 exists. `> .elementor-widget`, never `> .elementor-element`: the chips, the figures and the inner groups are CONTAINERS and must keep their boxes. ------------------------------------------------------------ */ body.pag-v6 :is( .fc, .fc-who, .area-head, .area-head > .e-con, .step, .roles, .pk-body, .pk-note, .cert-text, .cert-fig ) > .elementor-widget, body.pag-v6 :is( .fc, .fc-who, .area-head, .area-head > .e-con, .step, .roles, .pk-body, .pk-note, .cert-text, .cert-fig ) > .elementor-widget > .elementor-widget-container{ display:contents; } /* ------------------------------------------------------------ 2. THE CERTIFICATE PHOTOGRAPH `.cert-fig img{position:absolute;inset:0}` resolves against the nearest POSITIONED ancestor, and every Elementor container is `position:relative`. So the image sized itself to the widget wrapper rather than the figure. This is trap 2 from V6-BUILD-RULES.md — the one that rendered every card photograph on the homepage as nothing at all while every measurement passed, because the layout is driven by the figure and not by the image inside it. Flattened above, so the figure is the positioned ancestor again. Stated here as well because it is the half that fails SILENTLY: an absolutely positioned image against the wrong box has no height, and nothing in the harness reports a photograph that is not there. ------------------------------------------------------------ */ body.pag-v6 .cert-fig > .elementor-widget-image, body.pag-v6 .pk-fig > .elementor-widget-image{ display:contents; } /* BOTH FIGURES, and `.pk-fig` proves the point six times over. It carries `aspect-ratio:16/9`, so the figure keeps its exact height with nothing inside it — every section height, the whole width ladder and `textdiff.mjs` all passed while all six package photographs rendered at 385x0. The pixel diff is the only check that saw it, and it saw it as 13% of one section. */ /* ------------------------------------------------------------ 3. THE SIX PACKAGE CARDS ARE WHOLE-CARD LINKS §5 of the shared bridge, for this page's cards. v6 makes each `.pk` a single ; a container cannot be one, so the card is a container and its own inner `.link` is stretched over it. The link is NOT a direct child here — it sits inside `.pk-body` — and every Elementor container is `position:relative`, so without the `position:static` the overlay would size itself to `.pk-body` and the picture above it would be dead. That is the About page's `.rel-card` exactly, and it is invisible to every measurement, every pixel diff and every hover test. `cardhit.mjs` is what catches it. ------------------------------------------------------------ */ body.pag-v6 .pk{ position:relative; } body.pag-v6 .pk-body{ position:static; } /* AND THAT `position:static` MOVED THE ICON, which is the cost of the line above and was missed for a fortnight. `.pk-ico` is `position:absolute; left:var(--s5); top:0; translateY(-50%)`. In v6 its containing block is `.pk-body`, so it straddles the seam between the photograph and the body — half on the picture, half on the card. With `.pk-body` made static the nearest positioned ancestor becomes `.pk`, and `top:0` stops meaning "the top of the body" and starts meaning "the top of the CARD". All six chips jumped 217px up, onto the middle of the photograph. The two requirements genuinely conflict: the stretched link needs `.pk` as its containing block and the chip needs `.pk-body`, and only one element can be the nearest positioned ancestor of both. So the chip is given the offset explicitly instead. `100cqw / 2` IS THE FIGURE'S HEIGHT, not a magic number. `.pk-fig` is `aspect-ratio:2/1` at the full card width, so its height is exactly half of that width — and `.pk` as an inline-size container makes that width readable. The seam moves when the card resizes and the chip moves with it, which a fixed pixel value would not do. IT READ `100cqw * 9 / 16` UNTIL 27 Aug, AND THAT IS THE TRAP IN THIS RULE. `.pk-fig` was `aspect-ratio:16/9` until §31 of the shared bridge made every card photograph 2:1. This line is the ONLY other place that ratio is written down, nothing connects the two, and nothing failed when they disagreed: all six chips simply slid 24px below the seam and sat in the body, with no error anywhere. It was reported by eye, not caught by a check. IF `.pk-fig`'s RATIO EVER CHANGES AGAIN, CHANGE THIS NUMBER IN THE SAME EDIT. The one on Platform and the one on About do not need it — their chips hang off `.pick-body` and `.cap-body`, whose tops ARE the seam, so they follow a ratio change on their own. This card is the exception because the stretched link took `.pk` as its containing block, which is what the note above describes. `container-type:inline-size` is safe here: the card's width comes from its grid track, so containing its inline size changes nothing about how it is laid out. */ body.pag-v6 .pk{ container-type:inline-size; } body.pag-v6 .pk-ico{ top:calc(100cqw / 2); } body.pag-v6 .pk .link a::after{ content:''; position:absolute; inset:0; z-index:1; } /* v6 writes `.pk:hover .link` and `.pk:hover .link svg`, because the pointer is rarely on the words of a whole-card link. Our card is a container with a stretched inner anchor, so `a:hover` never fires — §26.2 and §28 of the shared bridge, fourth instance. */ body.pag-v6 .pk:hover a.link{ color:var(--azure); } body.pag-v6 .pk:hover a.link svg{ transform:translateX(3px); } /* ------------------------------------------------------------ 4. THE CONTAINERS' OWN GAP v6 spaces all of these with margins on their children; an Elementor container adds a gap on top of every one. `gap`, not `display` — a bridge rule with no media query beats a v6 rule that has one, and three of these change layout at a breakpoint. ------------------------------------------------------------ */ body.pag-v6 :is( .fc, .fc-who, .step, .roles, .pk, .pk-body, .pk-note, .cert-text, .area ){ gap:0; } /* ------------------------------------------------------------ 5. `flex:1` ON A CONTAINER `.e-con.e-flex{flex:var(--flex-grow) …}` is (0,2,0) and `.pk-body{flex:1}` is (0,1,0), so Elementor won and the package card's body stopped growing — `.pk-body` is what takes the leftover height so six cards of unequal copy line their links up. Found on Platform, where the same conflict put one link in nine 4.57px high. Here the six cards happen to be close enough in length that it never showed, which is the worst kind of latent difference: correct today, wrong the first time somebody edits one card's copy. ------------------------------------------------------------ */ body.pag-v6 .pk-body{ flex:1; }