, so the gap had nothing to space.
The paragraph steps out of the box tree and the anchors become the flex
children the rule was written for. */
body.pag-v6 .foot-legal .elementor-widget-container,
body.pag-v6 .foot-legal p{ display:contents; }
/* ------------------------------------------------------------
9. THE IMAGE ANCHOR
Elementor's linked image renders and leaves the anchor inline,
so the img sat on a text baseline and the widget measured 7.5px taller than
the image inside it — 56.98 against v6's 49.48 on the nav mark.
------------------------------------------------------------ */
body.pag-v6 .elementor-widget-image a{ display:block; line-height:0; }
/* ------------------------------------------------------------
10. FLEX ROWS THAT ELEMENTOR MAKES COLUMNS
An Elementor container is a flex COLUMN by default, and
`.e-con.e-flex{flex-direction:var(--flex-direction)}` is specificity 0,2,0 —
it beats pag-flow's 0,1,0. Where v6 relies on the browser default of `row`
and does not say so itself, the column won: the footer's legal line stacked
into three centred rows, 142px instead of 69.
Named one at a time, never blanket. A blanket rule strong enough to beat
Elementor here would also beat v6's own `.opt{flex-direction:column}` and
lay the option cards on their side. These two are the only containers v6
leaves at the default and Elementor changes.
------------------------------------------------------------ */
/* Bounded by the same breakpoint v6 uses. `@media (max-width:900px)` turns
`.foot-end` into a column, and an unbounded rule here — at 0,2,1 against
v6's 0,1,0 — beat that at every width, so the footer stayed a row on a
phone where v6 stacks it. A bridge rule that corrects Elementor must not
also outrank the original's own responsive behaviour. */
@media (min-width:901px){
body.pag-v6 .foot-end{ flex-direction:row; }
}
body.pag-v6 .hero-cta{ flex-direction:row; }
/* ------------------------------------------------------------
11. TEXT INSIDE A FLEX CARD
v6 grows the option card's paragraph with `.opt-body p{flex:1}` so all three
cards end level whatever their copy. A Text Editor puts that paragraph two
wrappers down, so the wrapper was the flex child and the paragraph sat at
its natural height — two cards at 47px against v6's 70.5, and the card grid
19px taller overall.
The wrappers step out of the box tree so the paragraph is the flex child the
rule was written for.
------------------------------------------------------------ */
body.pag-v6 .opt-body > .elementor-widget-text-editor,
body.pag-v6 .opt-body > .elementor-widget-text-editor > .elementor-widget-container{ display:contents; }
/* ------------------------------------------------------------
12. FOOTER LINK COLUMNS
`.foot-top` is a grid whose link columns size to their widest link. An Icon
List's
is a full-width flex column, so each track took the space it was
offered rather than the space it needed — 242px against v6's 113.
------------------------------------------------------------ */
body.pag-v6 .foot-col .elementor-icon-list-items{ display:block; width:auto; }
body.pag-v6 .foot-col .elementor-widget-icon-list,
body.pag-v6 .foot-col .elementor-widget-icon-list > .elementor-widget-container{ width:auto; }
/* AND THE COLUMN ITSELF, which is what made the page scroll SIDEWAYS.
An Elementor container carries `width:var(--width)` with `--width:100%`, and
in a grid `width:100%` resolves against the whole track — then `.foot-col +
.foot-col{margin-left:var(--foot-gap)}` is added OUTSIDE that. So each of the
last two columns was its track wide plus 121px of margin, and the last one
finished 6px past the viewport.
`width:auto` is what a grid item is supposed to have: `justify-items` is
`stretch` by default, and stretch fills the track MINUS the margins. v6's own
columns measure 113px in a 234px track for exactly that reason.
Invisible in every check that mattered. The tracks are identical on both
pages, so `probe.mjs` on `.foot-top` agreed; the columns are left-aligned, so
nothing MOVED and the pixel diff was clean; and the overflow is 6px of empty
navy off the right edge, which photographs as nothing. `widths.mjs` prints
`hOverflow` for this and nothing else does. */
body.pag-v6 .foot-col{ width:auto; }
/* ------------------------------------------------------------
13. HEADING LINE HEIGHT
v6 sets its heading rhythm on the ELEMENT — `h3{line-height:1.3}`,
specificity 0,0,1. Elementor's Heading widget resets
`.elementor-heading-title{line-height:1}` at 0,1,0 and wins, so every
heading on the page sat tighter than v6 draws it: the option card titles
measured 21.59 against 28.06, and the difference compounds down the page.
Elementor's class cannot simply be dropped — its panel typography controls
target it, and the client would lose them. So the three v6 headings that
appear on this page have their line height restated, and this is the second
and last place in the file that repeats a v6 value.
h2 1.12 · h3 1.3 · h4 1.3 (pag-v6-system.css)
h1 is not restated: v6 leaves it to .hero h1, which is a class and already
beats Elementor.
------------------------------------------------------------ */
body.pag-v6 h2.elementor-heading-title{ line-height:1.12; }
body.pag-v6 h3.elementor-heading-title{ line-height:1.3; }
body.pag-v6 h4.elementor-heading-title{ line-height:1.3; }
/* ------------------------------------------------------------
14. TEXT EDITOR'S TRAILING MARGIN
Elementor gives the last paragraph in a Text Editor a bottom margin. v6's
reset is `*{margin:0}` and it spaces prose with the flex gap of the block
around it, so the extra 9.975px was pure addition.
WRITTEN AT (0,3,2) FIRST, AND THAT WAS THE BUG.
The margin it undoes comes from a rule at (0,0,1). Beating a (0,0,1) rule
from (0,3,2) also beats every v6 rule that gives a paragraph a margin BY
CLASS, and v6 has a dozen of them:
.route p:not(.tag){ margin-bottom:var(--s5) } (0,2,1)
.path p{ margin-bottom:var(--s5) } (0,1,1)
.rel-card p{ margin-bottom:var(--s5) } (0,1,1)
Any Text Editor holding ONE paragraph is `p:last-child`, so on those blocks
v6's margin vanished. Nowhere to put it back either: Elementor's own
`.e-con .elementor-widget.elementor-widget{margin-block-end:0}` is (0,3,0)
and flattens the wrapper, so both boxes lose their spacing and the section
closes up.
It never showed on the homepage because every class-scoped paragraph rule
there sets `margin:0` anyway — `.tile p`, `.diff-row p`. The homepage
measured 0.00% with this rule already wrong. Found on About, by why.mjs.
`:where()` contributes NOTHING to specificity, so the same selector now
weighs (0,0,1): a tie with the rule it was written to undo, which the bridge
wins because it loads last — and a loss to every v6 class rule, which is the
entire point.
AND IT IS EVERY PARAGRAPH, NOT JUST THE LAST ONE. It was `p:where(:last-child)`
first, which is the case a single-paragraph widget hits — and that hid the
other one for four pages. A widget holding TWO paragraphs keeps the theme's
`.7em` between them, and whether it shows depends on the parent:
· in a BLOCK parent the two margins collapse, so v6's own
`p + p{margin-top:…}` swallows it and nothing is visible. About's
three-paragraph block is like this, and measured exactly.
· in a FLEX column they do NOT collapse, so the gap is v6's margin PLUS
9.275px. Online Training's certificate block is like this.
v6's reset is `*{margin:0}`: no paragraph anywhere in v6 carries a bottom
margin it did not ask for by class. Restating that for every paragraph is
restating v6, and it is what makes the rule independent of how many
paragraphs a widget happens to hold.
------------------------------------------------------------ */
:where(body.pag-v6 .elementor-widget-text-editor) p{ margin-bottom:0; }
/* ------------------------------------------------------------
15. THE LAST THREE
Each one is Elementor's own value winning a property v6 also sets, at a
specificity v6's selector cannot reach. Written with v6's tokens rather than
numbers, so none of these can drift from pag-v6-system.css.
------------------------------------------------------------ */
/* The eyebrow. v6 spaces it with `.tag{margin-bottom:var(--s3)}` and the margin
was arriving as 0, because Elementor's own `margin-block-end` beat it — 12px
missing from each side of "the difference it makes".
`:where()`, AND THAT MATTERS. Written as `body.pag-v6 .tag` this weighs
(0,2,1), which beats not only Elementor but v6's OWN overrides: Subscription
Plans sets `.plan .tag{margin-bottom:var(--s5)}` at (0,2,0) to give the
eyebrow more room inside a plan card, and this rule quietly won — every plan
card came out 12px short and the section 12px with it.
That is §22's failure exactly: a bridge rule written to neutralise Elementor
becomes the thing overriding the original. `:where()` drops the scope to
nothing, so it lands at (0,0,1) — enough to beat Elementor's element-level
rule on order, and a loss to every v6 class rule including `.tag` itself.
`margin-block-end` is restated because that is the property Elementor sets. */
:where(body.pag-v6) .tag{ margin-bottom:var(--s3); margin-block-end:var(--s3); }
/* `margin-block-end`, not only `margin-bottom`. Elementor writes the LOGICAL
property for a widget's spacing, and a logical property set later beats the
physical one whatever its specificity — so `margin-bottom` landed as 0 while
the cascade showed v6's rule winning. That contradiction is the tell. */
/* v6's card link is plain text with an arrow. Elementor's Button widget brings
`.elementor-size-sm` padding with it, which made the link 38px tall against
v6's 23.5 and pushed every card 15px taller. Undoing Elementor's padding,
not restating v6's — v6 sets none. */
body.pag-v6 a.link{ padding:0; line-height:inherit; }
/* v6 grows the card body with `.opt-body{flex:1}` so the three cards end level
and the paragraph inside has room to fill. Elementor's
`.elementor-element{flex-grow:var(--flex-grow)}` is the same specificity and
the body stopped at its content height, leaving the paragraph at two lines
where v6 draws three. */
body.pag-v6 .opt-body{ flex-grow:1; }
/* The footer's three link columns are grid tracks that size to their widest
link. An Icon List's list still asked for the whole track, which squeezed
the brand column from 423px to 396 and reflowed its paragraph. */
body.pag-v6 .foot-col .elementor-widget-icon-list,
body.pag-v6 .foot-col .elementor-icon-list-items{ width:max-content; }
/* The eyebrow's 12px, restated against the token so it cannot drift. The plain
`.tag` selector above did not take even though the cascade showed it
winning — the child selector does, which is the difference between the two
and the reason this line exists rather than the shorter one. */
body.pag-v6 .diff-head > .tag{ margin-bottom:var(--s3); }
/* ------------------------------------------------------------
16. THE SOCIAL ROW
v6 draws three 19px marks: `.foot-social svg{width:19px;height:19px;display:block}`.
An Icon List leaves its anchor inline and pads the icon span, so each mark
sat on a text baseline inside a padded box — the row measured 99.5x26.5
against v6's 89x19, and those 7.5px were the last of the footer's difference.
The anchor and the icon span are made blocks with no line box of their own,
so the svg is the only thing setting the size, which is what v6 intends.
------------------------------------------------------------ */
body.pag-v6 .foot-social .elementor-icon-list-item > a{ display:block; line-height:0; padding:0; }
body.pag-v6 .foot-social .elementor-icon-list-icon{ display:block; line-height:0; padding:0; width:auto; }
/* ------------------------------------------------------------
17. THE THEME'S SKIP LINK
Hello Elementor prints its own "Skip to content" link at the top of .
v6 has the same link and hides it with `.visually-hidden`; the theme's uses
its own class, which v6's stylesheet knows nothing about, so it sat in flow
and pushed the entire page down by one line — 23.5px, on every section,
while each section measured exactly right on its own.
Hidden the way v6 hides its own, and still reachable: it stays focusable and
a keyboard user still gets it.
------------------------------------------------------------ */
body.pag-v6 .skip-link:not(:focus){
position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap;
}
/* ------------------------------------------------------------
18. BOTTOM MARGINS ON WIDGETS
The `margin-block-end` problem from §15, generalised. Wherever v6 puts a
bottom margin on something that becomes an Elementor WIDGET, Elementor's
logical margin lands on the same computed property and wins, and the space
simply vanishes. It is invisible at some widths and obvious at others —
the hero's 48px was intact at 1440 and gone at 390.
Restated as the logical property, against v6's own tokens, so nothing here
can drift from pag-v6-system.css. Containers are unaffected: `.diff-head`
keeps its margin because it is a container, not a widget.
------------------------------------------------------------ */
/* Written as a child selector, like the eyebrow in §15. The plain
`body.pag-v6 .hero-lead` form does not take even though it is more specific
than anything Elementor sets — the same behaviour, in the same place in the
cascade, and the child form is what works in both cases. */
body.pag-v6 .hero-in > .hero-lead{ margin-block-end:var(--s7); }
body.pag-v6 .foot-col h3{ margin-block-end:var(--s4); }
body.pag-v6 .opts-head h2{ margin-block-end:var(--s4); }
/* ------------------------------------------------------------
19. THE TIMELINE STEP TEXT
v6 styles the step name and its line as `.tlpop b` and `.tlpop > span` — the
second is a CHILD selector, and a Text Editor puts its content two wrappers
and a
down, so the span was never a child and never picked up its size.
Two pixels a step, six steps, on every width.
The wrappers and the paragraph step out of the box tree so both are the
direct children the rules were written for.
------------------------------------------------------------ */
body.pag-v6 .tlpop > .elementor-widget-text-editor,
body.pag-v6 .tlpop > .elementor-widget-text-editor > .elementor-widget-container,
body.pag-v6 .tlpop p{ display:contents; }
/* ------------------------------------------------------------
20. FOOTER LINK SPACING
`.foot-col li{margin-bottom:7px}` — the logical-margin problem again, on the
list items this time. 7px a link, three links a column.
------------------------------------------------------------ */
body.pag-v6 .foot-col .elementor-icon-list-item{ margin-block-end:7px; }
/* ------------------------------------------------------------
21. THE STEP LINE, AND WHY §19 WAS NOT ENOUGH
§19 gave the Text Editor wrappers `display:contents` so the step's and
would become `.tlpop`'s children. That fixes LAYOUT and not
SELECTORS: `display:contents` removes a box from the box tree, it does not
change the DOM, so v6's `.tlpop > span` still had a
and two divs between
it and the span and never matched. The looked right only because v6
styles it as `.tlpop b`, a descendant selector.
So the span is re-pointed here. `display:block` is the whole of it — the
size and colour in v6's rule are inherited from `.tlpop` and were never the
problem; without the block the span shrank to its text, 209px wide instead
of 222, and set one line differently.
------------------------------------------------------------ */
body.pag-v6 .tlpop span{ display:block; font-size:var(--t-small); line-height:var(--lh-small); }
/* ------------------------------------------------------------
22. FOOTER LINK LINE BOX
`inline-block` (§12) sizes the column correctly but gives each anchor a
line box of its own, 0.7px taller than the inline one v6 draws. Three links
a column, three columns, on every width.
------------------------------------------------------------ */
/* `inline-block`, not block. v6 leaves the anchor inline, so each list item is
as tall as the LIST's line height (23.09) and not the link's own (22.09) —
made a block the anchor became the item's whole height and every link lost a
pixel. Inline-block keeps the item's line box while still letting the column
size to its widest link. */
body.pag-v6 .foot-col .elementor-icon-list-item > a{ display:inline-block; }
/* The label inside each footer link is an inline span with its own line box,
which sat 0.7px proud of the anchor's. Made a block it takes the anchor's
line height and the column lands exactly on v6's. */
body.pag-v6 .foot-col .elementor-icon-list-text{ display:block; line-height:inherit; }
/* The size, restated against v6's tokens. Two rules were forcing `font-size:
inherit` on this anchor — Elementor's `.elementor-widget .elementor-icon-list-item a`
at 0,2,1, and my own §4 rule — and both beat v6's `.foot-col a` at 0,1,1. The
links set at 14.25px instead of 13, which is where the last 0.7px a line came
from. Mine was half the problem, which is worth saying: a bridge rule written
to neutralise Elementor can quietly become the thing overriding the original. */
body.pag-v6 .foot-col .elementor-icon-list-item > a{
font-size:var(--t-small); line-height:var(--lh-small);
}
/* The card's "Explore Free Courses" link is plain text with an arrow in v6.
Elementor's Button widget brings a filled background as well as padding
(§15), which drew a solid blue bar across every card. */
body.pag-v6 a.link{ background:none; border:0; }
/* ------------------------------------------------------------
23. THE CARD PHOTOGRAPHS
v6 fills the figure with `.opt-fig img{position:absolute;inset:0}`, against
`.opt-fig{position:relative}`. Elementor puts the image inside two wrappers,
and the inner one became the positioned ancestor — a box whose only child is
absolute, so it has no height, so `inset:0` resolved to a 0px-tall image.
The photographs were not misrendered. They were not rendered at all: every
card showed its empty `--wash` background, and because the layout is driven
by `aspect-ratio` on the figure rather than by the image, every height still
measured exactly right. Nothing but the pixel diff could have caught this.
The wrappers step out of the box tree so `.opt-fig` is the positioned
ancestor again, which is what v6's rule was written against.
------------------------------------------------------------ */
body.pag-v6 .opt-fig > .elementor-widget-image,
body.pag-v6 .opt-fig > .elementor-widget-image > .elementor-widget-container,
/* The hero's film is the same defect and was just as invisible: `.hero-bg` is
also `position:absolute;inset:0`, so the video collapsed to nothing and the
hero rendered on the pale page ground with white text on it — legible in the
measurements, unreadable on screen. */
body.pag-v6 .hero > .elementor-widget-html,
body.pag-v6 .hero > .elementor-widget-html > .elementor-widget-container{ display:contents; }
/* The social row sat 10.5px wide of v6's 89: three 19px marks and two 16px
gaps. The Icon List's items were carrying width of their own. */
body.pag-v6 .foot-social .elementor-icon-list-item{ width:19px; }
body.pag-v6 .foot-social .elementor-icon-list-icon{ width:19px; }
/* ------------------------------------------------------------
24. FOUR THINGS THE MEASUREMENTS COULD NOT SEE
Every one of these is a colour or an alignment. Heights matched, widths
matched, the ladder was Δ0 at four widths, and the page was still wrong in
four places. Screenshots found them; numbers never would have.
------------------------------------------------------------ */
/* 1 · The hero text sat 64px too high. v6 bottom-aligns it with
`.hero{display:flex;align-items:flex-end}`, and Elementor's
`.e-con.e-flex{align-items:var(--align-items)}` at 0,2,0 beat that 0,1,0 —
the same shape as the footer's flex-direction, and the same fix. */
body.pag-v6 .hero{ align-items:flex-end; flex-direction:row; }
/* `flex-direction` as well as `align-items`, and that is the whole reason this
took two passes. An Elementor container is a flex COLUMN, and in a column
`align-items` governs the horizontal axis — so the rule applied, the computed
value read `flex-end` on both sides, and the text still sat at the top.
A correct-looking computed value on the wrong axis. */
/* 2 · The card link's hover. v6 writes `.link:hover, a:hover .link` because on
the option cards the whole card is one and the pointer is rarely on the
words. Our card is a container with a stretched inner link, so `a:hover`
never fired and the link stayed Deep Blue while the rest of the card
responded. */
body.pag-v6 .opt:hover a.link{ color:var(--azure); }
body.pag-v6 .opt:hover a.link svg{ transform:translateX(3px); }
/* 3 · The step line was rendering white. §21 re-pointed `.tlpop > span` for
display and size and dropped the colour with it — v6 sets it at 64% white
over navy, and full white is a different reading weight against that panel. */
body.pag-v6 .tlpop span{ color:color-mix(in srgb, #fff 64%, var(--navy)); }
/* 4 · The social marks are now v6's own SVGs, injected by the class filter.
Their label is the link text, hidden the way v6 hides it. */
body.pag-v6 .foot-social .elementor-button-content-wrapper{
position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap;
}
body.pag-v6 .foot-social{ flex-direction:row; }
body.pag-v6 .foot-social a{ display:block; line-height:0; padding:0; background:none; }
body.pag-v6 .foot-social svg{ width:19px; height:19px; display:block; }
/* ------------------------------------------------------------
25. A STICKY HEADER
A DELIBERATE CHANGE FROM v6.1.2, asked for on 26 Aug so the nav behaves like
the one on the current site. v6.1.2's nav scrolls away; this pins it.
`sticky`, not `fixed`. The live v4.7 nav is `position:fixed`, which takes it
out of flow — every following block moves up by its height and has to be
padded back down. Sticky keeps the nav in flow, so the page geometry is
exactly what was measured against v6.1.2 and only the behaviour changes.
The header template's own wrapper has to go first. Elementor renders the
template inside `