/* ============================================================ SUBSCRIPTION PLANS — the page's own bridge. ============================================================ */ /* ------------------------------------------------------------ 1. EVERY CARD'S CHILDREN ARE ITS OWN Each of these is a flex column whose children v6 spaces with margins and sizes as flex items, and Elementor's wrapper is the item instead. `.plan` is the one that matters most: the six `data-when` paragraphs, the eyebrow, the pitch, the list and the button are all siblings in v6, and the card's whole rhythm is the margins they carry. `> .elementor-widget`, never `> .elementor-element`: the chips are CONTAINERS and must keep their boxes. ------------------------------------------------------------ */ body.pag-v6 :is( .plan, .more-card, .unit, .who-text, .faqs-head, .plans-head, .cmp ) > .elementor-widget, body.pag-v6 :is( .plan, .more-card, .unit, .who-text, .faqs-head, .plans-head, .cmp ) > .elementor-widget > .elementor-widget-container{ display:contents; } /* ------------------------------------------------------------ 2. THE CONTAINERS' OWN GAP Only the ones v6 leaves at zero — checked one by one against the source, the way Platform's §4 says to. `.plan-grid`, `.more`, `.units` and `.fits` all set their own and are deliberately absent. ------------------------------------------------------------ */ body.pag-v6 :is( .plan, .more-card, .unit, .who-text, .faqs-head, .plans-head ){ gap:0; } /* ------------------------------------------------------------ 3. THE PHOTOGRAPH IN `.who-fig` `position:absolute; inset:0` against the nearest positioned ancestor, and every Elementor container is one. Trap 2 — the figure keeps its height from `aspect-ratio` and every measurement passes with a zero-height image inside. ------------------------------------------------------------ */ body.pag-v6 .who-fig > .elementor-widget-image{ display:contents; } /* ------------------------------------------------------------ 4. `flex:1` ON A CONTAINER `.e-con.e-flex{flex:var(--flex-grow) …}` is (0,2,0) against v6's (0,1,0), so any container v6 tells to grow stops growing. Restated at (0,2,0); the bridge loads after Elementor's frontend stylesheet and wins the tie. ------------------------------------------------------------ */ body.pag-v6 .plan-lead{ flex:1; } /* ------------------------------------------------------------ 5. THE TWO CARD ROWS ARE `` CONTAINERS `.more-card` and `.unit` are single anchors in v6 and single anchors here, so there is no overlay and nothing for `cardhit.mjs` to catch — see the note at the head of the Platform block. What comes WITH that is the parent theme's `a:active,a:hover{color:#336}`, which reaches a card the moment the card is really a link. Both v6 rules leave the colour alone on hover, so restating the resting value is restating v6. ------------------------------------------------------------ */ body.pag-v6 a.more-card:hover, body.pag-v6 a.unit:hover{ color:inherit; } /* v6 writes `.more-card:hover .link` and `.unit:hover .link`; the inner `.link` is a `` here as it is there, so those rules apply untouched. Nothing needed. */ /* ------------------------------------------------------------ 6. THE BILLING SWITCH IS A FLEX ITEM `.switch{display:inline-flex; align-self:center; margin-bottom:var(--s6)}` — and `align-self` only means anything on a flex ITEM, which was the widget wrapper. So the switch sat hard against the left edge of the panel instead of centred under the heading, and its margin was Elementor's to zero. ------------------------------------------------------------ */ body.pag-v6 #plans > .elementor-widget-html, body.pag-v6 #plans > .elementor-widget-html > .elementor-widget-container{ display:contents; } /* ------------------------------------------------------------ 7. THE COMPARISON TABLE INHERITS THE PAGE, NOT THE THEME Three parent-theme rules reach a table that v6 leaves alone, and between them they cost 0.2px — which turned out to matter far more than 0.2px sounds. table{margin-bottom:…} v6's reset is `*{margin:0}` at (0,0,0), which loses to a rule naming the element. table{font-size:.9em} v6's line-height is a unitless ratio, so every cell computed its leading against a font 10% smaller — 21.16 against 23.51. table td, table th{line-height:1.5} a SECOND rule aimed at the cells rather than the table, so fixing the font size did not reach it: the header row came out 12 × 1.5 = 18 against v6's 12 × 1.65 = 19.8. WHY 0.2px WAS WORTH CHASING. `#compare` is the fifth of nine sections, so every section below it landed 0.2px out of subpixel phase with the static — and text rendered a fraction of a pixel off produces coloured fringes that a pixel diff counts. `.units` read 5.81% at TOL=12 and 0.06% at TOL=192 with nothing whatsoever wrong with it. That collapse across thresholds is the tell, and it is why the harness reads every diff at two: a real difference holds as the threshold rises, antialiasing falls away. A sub-pixel error high on a page shows up as noise everywhere below it. TWO THINGS ABOUT THE CELL RULE, both of which the first attempt got wrong. It has to WEIGH (0,0,2). The theme's is `table td, table th`, two elements; `:where(…) :is(td, th)` weighs (0,0,1) and loses. Naming `table` in the selector matches it exactly, so the bridge wins on load order — and it is still below `.cmp thead th` at (0,1,2), which is entitled to override it. And the value cannot be `inherit`. v6's line-height is the UNITLESS `--lh-text`, which every element recomputes against its own font size — that is how a 12px header cell gets 19.8 while the 14.25px body gets 23.51. `inherit` copies the parent's COMPUTED length, so it would have pinned every cell to 23.51. The token itself is the only correct value here. ------------------------------------------------------------ */ :where(body.pag-v6 .cmp) table{ margin:0; font-size:inherit; } :where(body.pag-v6) .cmp table :is(td, th){ line-height:var(--lh-text); border:0; } /* A FOURTH theme rule, and it only surfaced once the line-height was right: the parent theme gives every cell a 1px border, and with `box-sizing:border-box` that is 2px per cell. v6 draws the table's rules with the cells' own backgrounds and `border-spacing`, never with borders — `.cmp` sets none at all — so zeroing it restates v6 rather than choosing a value. It was invisible until the leading was fixed because it had been cancelling part of the 1.5-vs-1.65 difference. Two wrongs measuring closer to right than one is exactly why a section that is 0.2px out is worth opening rather than rounding away. */ /* ------------------------------------------------------------ A FIFTH PARENT-THEME TABLE RULE — client item 7 "There is an extra line above the comparison table that should not be there." There is, and it is the theme's, not ours: table caption+thead tr:first-child th, table thead:first-child tr:first-child th, … { border-block-start:1px solid hsla(0,0%,50%,.502) } Four of these were found when this page was built and are undone above. This is the fifth, and it hid behind them: it targets only the FIRST row of the first `thead`, so it draws exactly one line, along the top of the table, and nowhere else. A rule that produces a single hairline in a single place is the hardest kind to notice in a diff and the easiest to see on the page. IT ALSO OUT-WEIGHS THE FIX THAT SHOULD HAVE COVERED IT. The rule above sets `border:0` on every cell at (0,1,2). The theme's is (0,2,4) — two `:first-child` pseudo-classes and four element names — so for `border-block-start` alone the theme won and every other border went. (0,2,5), which is the same shape one element deeper. The design draws nothing there: `.cmp` separates its rows with `border-spacing:0 2px` and alternating tinted bands, and has no rules anywhere. ------------------------------------------------------------ */ body.pag-v6 .cmp table :is(thead, tbody) tr :is(td, th){ border:0; } /* ------------------------------------------------------------ THE FEATURED PLAN CARD, GIVEN THE CLOSING CARD'S MANNERS Client items 9 and 10, and they are one card behaving unlike its twin. The site has two deep-blue cards: `.close-card--deep` in the closing band, and `.plan--featured` in the middle of the plan row. They are the same idea — a Deep Blue panel with an azure wash and a white button — and shared.css teaches the first one two things it never taught the second. ── ITEM 9 · THE CARD DOES NOT ANSWER A POINTER ── Measured across all three plans: .plan (white) shadow none -> --lift border tints, lifts 4px .plan--featured shadow --lift -> --lift lifts 4px, nothing else `.plan--featured:hover` sets `border-color:var(--deep)`, which is the colour it already is — so the only thing that changes is the 4px rise. In a row of three the middle card is the one that does not respond. It cannot simply borrow `--lift`: it already WEARS `--lift` at rest, and a dark card needs a heavier shadow than a white one to register at all. The closing card solved that and its value is reused here unchanged. ── ITEM 10 · THE BUTTON IS THE DEFAULT ONE ── Professional background #fff text rgb(20,33,61) navy, reads black closing band background #fff text rgb(13,71,161) Deep Blue `.plan--featured` never restates `.btn-secondary`, so the button falls through to the system default — white with `--ink` text. On a white panel that is right; on a Deep Blue one it is the only near-black on the page, and the arrow follows the text. Its hover is the plain `.btn-secondary:hover`, which turns the BORDER Deep Blue — invisible against a Deep Blue card — and the text from navy to Deep Blue, which is too slight to read as a response. The closing card's button tints its background instead, and that is what is copied. ── BOTH ARE DESIGN CHANGES, NOT CONVERSION FIXES ── Confirmed by measurement: the build matches v6.1.2 exactly on both counts, so nothing was lost in the move. This ADDS what the design never had, the same as client item 3 on Platform. That makes this file the wrong home for it, and knowingly so — `pag-v6-subscription-plans.css` is a byte-for-byte copy of the design and is never hand-edited. The real fix belongs in `www/v6.1.2/assets/css/page-subscription-plans.css`, a different version folder and not this session's to edit. Until it is made there, the build and the design differ here BY INTENT. ------------------------------------------------------------ */ /* item 9 — the closing card's hover shadow, reused verbatim */ body.pag-v6 .plan--featured:hover{ box-shadow:0 4px 8px color-mix(in srgb, var(--navy) 6%, transparent), 0 26px 56px -14px color-mix(in srgb, var(--navy) 26%, transparent); } /* item 10 — the closing card's white button, reused verbatim. `border-color` is restated because `.btn-secondary:hover` in system.css turns it Deep Blue, which on this card would draw a blue edge round a white button. */ body.pag-v6 .plan--featured .btn-secondary{ background:#fff; color:var(--deep); border-color:#fff; } body.pag-v6 .plan--featured:hover .btn-secondary, body.pag-v6 .plan--featured .btn-secondary:hover{ background:color-mix(in srgb, #fff 86%, var(--azure)); color:var(--deep); border-color:#fff; }